Currently, I am immersed in a three.js project that incorporates standard orbit controls on an object, specifically a particle cloud. Everything runs smoothly when this logic is embedded within my root class along with all the three.js code. However, my goal is to separate this logic into an external class for better organization.
Unfortunately, when I achieve this separation, the 'mousemove' and 'mouseup' events fail to trigger. Oddly enough, the touch events function flawlessly and the orbit behaves as intended.
I have experimented with using 'preventDefault()' in the calls, but it doesn't seem to yield any significant changes. Substituting 'window' for 'document' since we are now in a module also did not resolve the issue.
What could I be overlooking? The structure of the module is as follows:
var orbitElement;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var Controls = {
enableOrbiting: function(target) {
orbitElement = target;
document.addEventListener( 'mousedown', this.onDocumentMouseDown, false );
document.addEventListener( 'touchstart', this.onDocumentTouchStart, false );
document.addEventListener( 'touchmove', this.onDocumentTouchMove, false );
},
onDocumentMouseDown: function( event ) {
document.addEventListener( 'mousemove', this.onDocumentMouseMove, false );
document.addEventListener( 'mouseup', this.onDocumentMouseUp, false );
document.addEventListener( 'mouseout', this.onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
},
// More functions...
}
module.exports = Controls;