Add backrgound opacity attribute

Author: SylvainCorlay

examples/Examples.ipynb

@@ -32,12 +32,19 @@
    },
    "outputs": [],
    "source": [
-    "ball = Mesh(geometry=SphereGeometry(radius=1), material=LambertMaterial(color='red'), position=[2,1,0])\n",
-    "scene = Scene(children=[ball, AmbientLight(color='#777777'), make_text('Hello World!', height=.6)])\n",
-    "c = PerspectiveCamera(position=[0, 5, 5],\n",
-    "                      up=[0, 0, 1],\n",
-    "                      children=[DirectionalLight(color='white', position=[3, 5, 1], intensity=0.5)])\n",
-    "renderer = Renderer(camera=c, scene=scene, controls=[OrbitControls(controlling=c)])\n",
+    "ball = Mesh(geometry=SphereGeometry(radius=1), \n",
+    "                                    material=LambertMaterial(color='red'),\n",
+    "                                    position=[2, 1, 0])\n",
+    "\n",
+    "scene = Scene(children=[ball, AmbientLight(color='#777777')])\n",
+    "\n",
+    "c = PerspectiveCamera(position=[0, 5, 5], up=[0, 0, 1],\n",
+    "                      children=[DirectionalLight(color='white', \n",
+    "                                                 position=[3, 5, 1], \n",
+    "                                                 intensity=0.5)])\n",
+    "renderer = Renderer(camera=c, \n",
+    "                    scene=scene, \n",
+    "                    controls=[OrbitControls(controlling=c)])\n",
     "display(renderer)"
    ]
   },

js/src/jupyter-threejs.js

@@ -56,11 +56,8 @@ define(["jupyter-js-widgets", "underscore", "three"],
                 });
             }
             view_promises.push(effect_promise.then(function() {
-                that.effectrenderer.setSize(that.model.get('width'),
-                                            that.model.get('height'));
-                if (that.model.get('background')) {
-                    that.effectrenderer.setClearColor(that.model.get('background'))
-                }
+                that.effectrenderer.setSize(that.model.get('width'), that.model.get('height'));
+                that.effectrenderer.setClearColor(that.model.get('background'), that.model.get('background_opacity'))
             }));
             this.view_promises = Promise.all(view_promises).then(function(objs) {
                 that.scene.obj.add(that.camera.obj);
@@ -114,11 +111,8 @@ define(["jupyter-js-widgets", "underscore", "three"],
         update : function(){
             var that = this;
             this.view_promises.then(function() {
-                that.effectrenderer.setSize(that.model.get('width'),
-                                            that.model.get('height'));
-                if (that.model.get('background')) {
-                    that.effectrenderer.setClearColor(that.model.get('background'))
-                }
+                that.effectrenderer.setSize(that.model.get('width'), that.model.get('height'));
+                that.effectrenderer.setClearColor(that.model.get('background'), that.model.get('background_opacity'));
             });
 
             widgets.DOMWidgetView.prototype.update.call(that);
@@ -1944,7 +1938,8 @@ define(["jupyter-js-widgets", "underscore", "three"],
             camera: undefined,
             controls: [],
             effect: null,
-            background: 'black'
+            background: 'black',
+            background_opacity: 0.0
         })
     }, {
         serializers: _.extend({

pythreejs/pythreejs.py

@@ -758,13 +758,14 @@ class Renderer(DOMWidget):
     _model_name = Unicode('RendererModel').tag(sync=True)
 
     width = Unicode('600').tag(sync=True)  # TODO: stop relying on deprecated DOMWidget attribute
-    height = Unicode('400').tag(sync=True) 
+    height = Unicode('400').tag(sync=True)
     renderer_type = Enum(['webgl', 'canvas', 'auto'], 'auto').tag(sync=True)
     scene = Instance(Scene).tag(sync=True, **widget_serialization)
     camera = Instance(Camera).tag(sync=True, **widget_serialization)
     controls = List(Instance(Controls)).tag(sync=True, **widget_serialization)
     effect = Instance(Effect, allow_none=True).tag(sync=True, **widget_serialization)
     background = Color('black', allow_none=True).tag(sync=True)
+    backgroud_opacity = Float(min=0.0, max=1.0).tag(sync=True)
 
 
 class Light(Object3d):