Merge pull request #122 from vidartf/fix-fly

Fix FlyControls

Author: vidartf

js/scripts/three-class-config.js

@@ -239,12 +239,11 @@ module.exports = {
         relativePath: './controls/FlyControls',
         superClass: 'Controls',
         properties: {
-            forward_speed: new Types.Float(0),
-            lateral_speed: new Types.Float(0),
-            upward_speed: new Types.Float(0),
-            roll: new Types.Float(0),
-            pitch: new Types.Float(0),
-            yaw: new Types.Float(0),
+            moveVector: new Types.Vector3(0, 0, 0),
+            rotationVector: new Types.Vector3(0, 0, 0),
+            movementSpeed: new Types.Float(1.0),
+            rollSpeed: new Types.Float(0.05),
+            syncRate: new Types.Float(1.0),
         },
     },
     Picker: {

js/src/_base/Preview.js

@@ -34,15 +34,15 @@ var PreviewView = RenderableView.extend({
     setupEventListeners: function() {
         RenderableView.prototype.setupEventListeners.call(this);
         var child = this.model.get('child');
-        this.listenTo(child, 'change', this.onChildChange.bind(this));
+        this.listenTo(child, 'change', this.onChildChanged.bind(this));
         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));
+            this.listenTo(child, 'childchange', this.onChildChanged.bind(this));
         }
     },
 
-    onChildChange: function() {
+    onChildChanged: function() {
         // Enabling this line will reset the camera
         // when any changes are made to the child
         //this._resetCameraNeeded = true;
@@ -257,11 +257,11 @@ var PreviewModel = RenderableModel.extend({
 
     setupListeners: function() {
         var child = this.get('child');
-        this.listenTo(child, 'change', this.onChildChange.bind(this));
-        this.listenTo(child, 'childchange', this.onChildChange.bind(this));
+        this.listenTo(child, 'change', this.onChildChanged.bind(this));
+        this.listenTo(child, 'childchange', this.onChildChanged.bind(this));
     },
 
-    onChildChange: function(model, options) {
+    onChildChanged: function(model, options) {
         this.trigger('rerender', this, {});
     },
 

js/src/controls/FlyControls.js

@@ -1,47 +1,58 @@
 var _ = require('underscore');
 var THREE = require('three');
+var widgets = require('@jupyter-widgets/base');
 var FlyControls = require("../examples/controls/MomentumCameraControls.js").FlyControls;
 var FlyControlsAutogen = require('./FlyControls.autogen');
 
 
 var FlyControlsModel = FlyControlsAutogen.FlyControlsModel.extend({
 
     constructThreeObject: function() {
-        var that = this;
         this.clock = new THREE.Clock();
+        var controlling = this.get('controlling');
+        this.renderer = null;
+        this.syncAtWill = true;
+
+        obj = new FlyControls(controlling.obj);
+        obj.dispose();  // Disconnect events, we need to (dis-)connect on freeze/thaw
+        return obj
+    },
+
+    setupListeners: function() {
+        FlyControlsAutogen.FlyControlsModel.prototype.setupListeners.call(this);
+        var that = this;
+        this.obj.addEventListener('change', function() {
+            // Throttle syncs:
+            if (that.syncAtWill) {
+                that.syncAtWill = false;
+                that.update_controlled();
+                setTimeout(that.allowSync.bind(that), 1000 * that.get('syncRate'));
+            }
+        });
+        this.on('enableControl', this.onEnable, this);
+        this.on('disableControl', this.onDisable, this);
+    },
+
+    onEnable: function(renderer) {
+        this.clock.start();
+        this.renderer = renderer;
+        this._update();
+    },
 
-        return widgets.resolvePromisesDict(this.model.get('controlling').views).then(function(views) {
-                // get the view that is tied to the same renderer
-                that.controlled_view = _.find(views, function(o) {
-                    return o.options.renderer_id === that.options.renderer_id
-                }, that);
-                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);
-                obj.addEventListener('change', function() { that.update_controlled(); });
-                that.options.start_update_loop();
-                that.model.on_some_change(['forward_speed', 'upward_speed', 'lateral_speed',
-                                           'roll', 'yaw', 'pitch'], that.update_plane, that);
-                delete that.options.renderer;
-                return obj
-            });
+    onDisable: function(renderer) {
+        this.clock.stop();
+        this.renderer = null;
     },
 
-    update_plane: function() {
-        this.obj.moveState.back = this.model.get('forward_speed');
-        this.obj.moveState.up = this.model.get('upward_speed');
-        this.obj.moveState.left = this.model.get('lateral_speed');
-        this.obj.moveState.pitchUp = this.model.get('pitch');
-        this.obj.moveState.yawRight = this.model.get('yaw');
-        this.obj.moveState.rollLeft = this.model.get('roll');
-        this.obj.updateRotationVector();
-        this.obj.updateMovementVector();
+    allowSync: function() {
+        this.syncAtWill = true;
     },
 
     _update: function() {
-        this.obj.movementSpeed = 0.33;
-        this.obj.update(this.clock.getDelta());
+        if (this.renderer !== null) {
+            this.obj.update(this.clock.getDelta());
+            requestAnimationFrame(this._update.bind(this));
+        }
     },
 
     update_controlled: function() {

js/src/core/Renderer.js

@@ -12,19 +12,20 @@ var ThreeModel = require('../_base/Three').ThreeModel;
 
 var RendererModel = RenderableModel.extend({
 
-    defaults: _.extend({}, RenderableModel.prototype.defaults, {
-
-        _view_name: 'RendererView',
-        _model_name: 'RendererModel',
-
-        scene: null,
-        camera: null,
-        controls: [],
-        effect: null,
-        background: "black",
-        background_opacity: 1.0,
-
-    }),
+    defaults: function() {
+        return _.extend(RenderableModel.prototype.defaults.call(this), {
+
+            _view_name: 'RendererView',
+            _model_name: 'RendererModel',
+
+            scene: null,
+            camera: null,
+            controls: [],
+            effect: null,
+            background: "black",
+            background_opacity: 1.0,
+        });
+    },
 
     initialize: function(attributes, options) {
         RenderableModel.prototype.initialize.apply(this, arguments);
@@ -38,18 +39,18 @@ var RendererModel = RenderableModel.extend({
 
         var scene = this.get('scene');
         var camera = this.get('camera');
-        this.listenTo(scene, 'change', this.onChildChange.bind(this));
-        this.listenTo(scene, 'childchange', this.onChildChange.bind(this));
-        this.listenTo(scene, 'rerender', this.onChildChange.bind(this));
+        this.listenTo(scene, 'change', this.onChildChanged.bind(this));
+        this.listenTo(scene, 'childchange', this.onChildChanged.bind(this));
+        this.listenTo(scene, 'rerender', this.onChildChanged.bind(this));
         this.listenTo(camera, 'change', this.onCameraChange.bind(this));
 
     },
 
     onCameraChange: function(model, options) {
-        this.onChildChange();
+        this.onChildChanged(model, options);
     },
 
-    onChildChange: function(model, options) {
+    onChildChanged: function(model, options) {
         this.trigger('rerender', this, {});
     },
 

js/src/examples/controls/MomentumCameraControls.js

@@ -9,31 +9,28 @@ var FlyControls = function ( object, domElement ) {
 	this.object = object;
 
 	this.domElement = ( domElement !== undefined ) ? domElement : document;
-	if ( domElement ) this.domElement.setAttribute( 'tabindex', -1 );
 
 	// API
 
+	// Set to false to disable this control
+	this.enabled = true;
+
 	this.movementSpeed = 1.0;
 	this.rollSpeed = 0.05;
 
-	this.dragToLook = false;
-	this.autoForward = false;
-
-	// disable default target object behavior
+	this.moveVector = new THREE.Vector3( 0, 0, 0 );
+	this.rotationVector = new THREE.Vector3( 0, 0, 0 );
 
 	// internals
 
 	this.tmpQuaternion = new THREE.Quaternion();
 	var lastPosition = new THREE.Vector3();
 	var lastQuaternion = new THREE.Quaternion();
-        var scope = this;
+	var scope = this;
+	var EPS = 0.000001;
 
 	this.mouseStatus = 0;
 
-	this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
-	this.moveVector = new THREE.Vector3( 0, 0, 0 );
-	this.rotationVector = new THREE.Vector3( 0, 0, 0 );
-
 	this.handleEvent = function ( event ) {
 		if ( typeof this[ event.type ] == 'function' ) {
 			this[ event.type ]( event );
@@ -45,48 +42,30 @@ var FlyControls = function ( object, domElement ) {
 		var moveMult = delta * this.movementSpeed;
 		var rotMult = delta * this.rollSpeed;
 
-		this.object.translateX( this.moveVector.x * moveMult );
-		this.object.translateY( this.moveVector.y * moveMult );
-		this.object.translateZ( this.moveVector.z * moveMult );
+		this.object.position.addScaledVector(this.moveVector, moveMult);
 
 		this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize();
 		this.object.quaternion.multiply( this.tmpQuaternion );
 
 		// expose the rotation vector for convenience
 		this.object.rotation.setFromQuaternion( this.object.quaternion, this.object.rotation.order );
-	        this.dispatchEvent( changeEvent );
-                lastPosition.copy( this.object.position );
-		lastQuaternion.copy( this.object.position );
-	};
+		if (lastPosition.distanceToSquared( this.object.position ) > EPS ||
+			8 * ( 1 - lastQuaternion.dot( this.object.quaternion ) ) > EPS ) {
 
-	this.updateMovementVector = function() {
-		this.moveVector.x = ( -this.moveState.left    + this.moveState.right );
-		this.moveVector.y = ( -this.moveState.down    + this.moveState.up );
-		this.moveVector.z = ( -this.moveState.forward + this.moveState.back );
-	};
-
-	this.updateRotationVector = function() {
-		this.rotationVector.x = ( -this.moveState.pitchDown + this.moveState.pitchUp );
-		this.rotationVector.y = ( -this.moveState.yawRight  + this.moveState.yawLeft );
-		this.rotationVector.z = ( -this.moveState.rollRight + this.moveState.rollLeft );
-	};
-
-	this.getContainerDimensions = function() {
-		if ( this.domElement != document ) {
-			return {
-				size	: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
-				offset	: [ this.domElement.offsetLeft,  this.domElement.offsetTop ]
-			};
-		} else {
-			return {
-				size	: [ window.innerWidth, window.innerHeight ],
-				offset	: [ 0, 0 ]
-			};
+			this.dispatchEvent( changeEvent );
+			lastPosition.copy( this.object.position );
+			lastQuaternion.copy( this.object.quaternion );
+			return true;
 		}
+		return false;
 	};
 
 	this.dispose = function() {};
-	this.connectEvents = function() {};
+	this.connectEvents = function(element) {
+		if (element) {
+			scope.domElement = element;
+		}
+	};
 
 	function bind( scope, fn ) {
 		return function () {
@@ -98,9 +77,8 @@ var FlyControls = function ( object, domElement ) {
 
 	var changeEvent = { type: 'change' };
 
-	this.updateMovementVector();
-	this.updateRotationVector();
-
+	// Initialize lastPosition/Quaternion to initial values.
+	this.update(0);
 };
 
 FlyControls.prototype = Object.create( THREE.EventDispatcher.prototype );