Make background color for renderer work

Author: vidartf

js/src/_base/Preview.js

@@ -9,6 +9,9 @@ var RenderableView = Renderable.RenderableView;
 var RenderableModel = Renderable.RenderableModel;
 
 
+var BLACK = new THREE.Color('black');
+
+
 var PreviewView = RenderableView.extend({
 
     render: function() {
@@ -138,6 +141,9 @@ var PreviewView = RenderableView.extend({
         // cameras need to be added to scene
         this.scene.add(this.camera);
 
+        // Overrides clear color on renderer:
+        this.scene.background = BLACK;
+
         // Lights
         this.pointLight = new THREE.PointLight('#ffffff', 1, 0);
         this.pointLight.position.set(-100, 100, 100);

js/src/core/Renderer.js

@@ -8,7 +8,7 @@ var widgets = require('@jupyter-widgets/base');
 
 var RenderableModel = require('../_base/Renderable').RenderableModel;
 var RenderableView = require('../_base/Renderable').RenderableView;
-
+var ThreeModel = require('../_base/Three').ThreeModel;
 
 var RendererModel = RenderableModel.extend({
 
@@ -17,14 +17,12 @@ var RendererModel = RenderableModel.extend({
         _view_name: 'RendererView',
         _model_name: 'RendererModel',
 
-        width: "600",
-        height: "400",
         scene: null,
         camera: null,
         controls: [],
         effect: null,
         background: "black",
-        background_opacity: 0,
+        background_opacity: 1.0,
 
     }),
 
@@ -39,11 +37,13 @@ var RendererModel = RenderableModel.extend({
     setupListeners: function() {
 
         var scene = this.get('scene');
+        this.on('change', this.onChange.bind(this));
         this.listenTo(scene, 'change', this.onChange.bind(this));
         this.listenTo(scene, 'childchange', this.onChange.bind(this));
 
     },
 
+
     onChange: function(model, options) {
         this.trigger('rerender', this, {});
     },
@@ -75,6 +75,14 @@ var RendererView = RenderableView.extend({
         this.renderScene();
     },
 
+    acquireRenderer: function() {
+        RenderableView.prototype.acquireRenderer.call(this);
+
+        var background = ThreeModel.prototype.convertColorModelToThree( this.model.get('background') );
+        var background_opacity = ThreeModel.prototype.convertFloatModelToThree( this.model.get('background_opacity') );
+        this.renderer.setClearColor( background, background_opacity );
+    }
+
 });
 
 module.exports = {

pythreejs/core/Renderer.py

@@ -33,7 +33,7 @@ class Renderer(RenderableWidget):
     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)
-    background_opacity = Float(min=0.0, max=1.0).tag(sync=True)
+    background_opacity = Float(1.0, min=0.0, max=1.0).tag(sync=True)
 
     def __init__(self, scene, camera, controls=None, **kwargs):
         super(Renderer, self).__init__(