made three an external module so that other widgets use the same threejs instance

Author: vidartf

js/scripts/templates/js_index.mustache

@@ -15,13 +15,6 @@ __webpack_public_path__ = document.querySelector('body').getAttribute('data-base
 // Export widget models and views, and the npm package version number.
 module.exports['version'] = require('../package.json').version;
 
-// Load three.js into window namespace
-var THREE = require('three');
-window.THREE = THREE;
-
-// Load three.js extensions
-require('./examples/controls/OrbitControls');
-
 {{/if}}
 // Load all three.js python wrappers
 var loadedModules = [

js/scripts/templates/js_param_obj.mustache

@@ -4,6 +4,7 @@
 //
 
 var _ = require('underscore');
+var THREE = require('three');
 var widgets = require('@jupyter-widgets/base');
 var datawidgets = require('jupyter-datawidgets');
 

js/scripts/templates/js_wrapper.mustache

@@ -3,10 +3,12 @@ var widgets = require("@jupyter-widgets/base");
 var Promise = require('bluebird');
 var $ = require('jquery');
 
+var THREE = require('three');
 
 var Renderable = require('./Renderable');
 var RenderableView = Renderable.RenderableView;
 var RenderableModel = Renderable.RenderableModel;
+var OrbitControls = require("../examples/controls/OrbitControls.js").OrbitControls;
 
 
 var BLACK = new THREE.Color('black');
@@ -31,7 +33,7 @@ var PreviewView = RenderableView.extend({
         RenderableView.prototype.setupEventListeners.call(this);
         var child = this.model.get('child');
         this.listenTo(child, 'change', this.onChildChange.bind(this));
-        if (child.obj instanceof THREE.Object3D) {
+        if (child.obj.isObject3D) {
             // Since we use clone for objects, we need to rebuild for
             // any nested change instead of just rerendering.
             this.listenTo(child, 'childchange', this.onChildChange.bind(this));
@@ -50,21 +52,21 @@ var PreviewView = RenderableView.extend({
         // cameras need to be added to scene
         this.scene.add(this.camera);
 
-        if (obj instanceof THREE.Object3D) {
+        if (obj.isObject3D) {
 
             this.log('render Object3D');
             // Use a clone to not change `parent` attribute
             this.scene.add(obj.clone());
 
-        } else if (obj instanceof THREE.Geometry || obj instanceof THREE.BufferGeometry) {
+        } else if (obj.isGeometry || obj.isBufferGeometry) {
 
             var material;
             if (this.model.get('_flat')) {
                 material = new THREE.MeshPhongMaterial({
                     color: '#ffffff',
                     shading: THREE.FlatShading,
                 });
-            } else if (this.model.get('_wire') || obj instanceof THREE.WireframeGeometry) {
+            } else if (this.model.get('_wire') || obj.type === 'WireframeGeometry') {
                 material = new THREE.MeshBasicMaterial({
                     color: '#888888',
                     wireframe: true,
@@ -75,16 +77,16 @@ var PreviewView = RenderableView.extend({
                     color: '#ffffff',
                 });
             }
-            if (obj instanceof THREE.BufferGeometry && 'color' in obj.attributes) {
+            if (obj.isBufferGeometry && 'color' in obj.attributes) {
                 material.vertexColors = THREE.VertexColors;
             }
 
             var mesh = new THREE.Mesh(obj, material);
             this.scene.add(mesh);
 
-        } else if (obj instanceof THREE.Material) {
+        } else if (obj.isMaterial) {
 
-            if (obj instanceof THREE.SpriteMaterial) {
+            if (obj.type === 'SpriteMaterial') {
                 var sprite = new THREE.Sprite(obj);
                 var maxScale = sprite.position.distanceTo(this.camera.position);
                 var aspect = obj.map.image.width / obj.map.image.height;
@@ -100,7 +102,7 @@ var PreviewView = RenderableView.extend({
                 this.scene.add(mesh);
             }
 
-        } else if (obj instanceof THREE.Texture) {
+        } else if (obj.isTexture) {
 
             var geometry = new THREE.SphereGeometry(15, 16, 12);
             var mat = new THREE.MeshStandardMaterial({ map: obj });
@@ -122,7 +124,7 @@ var PreviewView = RenderableView.extend({
     setupControls: function() {
         // Allow user to inspect object with mouse/scrollwheel
         this.log('setting up controls');
-        var control = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+        var control = new OrbitControls(this.camera, this.renderer.domElement);
         control.target.set(0, 0, 0);
         control.update();
         this.controls = [control];

js/src/_base/Preview.js

@@ -3,6 +3,8 @@ var widgets = require("@jupyter-widgets/base");
 var Promise = require('bluebird');
 var $ = require('jquery');
 
+var THREE = require('three');
+
 var pkgName = require('../../package.json').name;
 var RendererPool = require('./RendererPool');
 

js/src/_base/Renderable.js

@@ -1,5 +1,7 @@
 var _ = require('underscore');
 
+var THREE = require('three');
+
 // This should be available for most devices:
 var MAX_RENDERERS = 8;
 

js/src/_base/RendererPool.js

@@ -4,6 +4,8 @@ var Promise = require('bluebird');
 var $ = require('jquery');
 var ndarray = require('ndarray');
 
+var THREE = require('three');
+
 var Enums = require('./enums');
 
 var version = require('../../package.json').version;

js/src/_base/Three.js

@@ -1,5 +1,6 @@
 var _ = require('underscore');
-require("../examples/controls/MomentumCameraControls.js");
+var THREE = require('three');
+var FlyControls = require("../examples/controls/MomentumCameraControls.js").FlyControls;
 var FlyControlsAutogen = require('./FlyControls.autogen');
 
 
@@ -14,7 +15,7 @@ var FlyControlsModel = FlyControlsAutogen.FlyControlsModel.extend({
                 that.controlled_view = _.find(views, function(o) {
                     return o.options.renderer_id === that.options.renderer_id
                 }, that);
-                obj = new THREE.FlyControls(that.controlled_view.obj, that.options.dom);
+                obj = new FlyControls(that.controlled_view.obj, that.options.dom);
                 that.register_object_parameters();
                 that.options.register_update(that._update, that);
                 obj.addEventListener('change', that.options.render_frame);

js/src/controls/FlyControls.js

@@ -1,13 +1,13 @@
 var _ = require('underscore');
-require("../examples/controls/OrbitControls.js");
+var OrbitControls = require("../examples/controls/OrbitControls.js").OrbitControls;
 var OrbitControlsAutogen = require('./OrbitControls.autogen');
 
 
 var OrbitControlsModel = OrbitControlsAutogen.OrbitControlsModel.extend({
 
     constructThreeObject: function() {
         var controlling = this.get('controlling');
-        obj = new THREE.OrbitControls(controlling.obj);
+        obj = new OrbitControls(controlling.obj);
         obj.dispose();  // Disconnect events, we need to (dis-)connect on freeze/thaw
         obj.enableKeys = false; // turn off keyboard navigation
 

js/src/controls/OrbitControls.js

@@ -1,4 +1,5 @@
 var _ = require('underscore');
+var THREE = require('three');
 var PickerAutogen = require('./Picker.autogen');