I've been using threejs for a while for the 3D of an image-based modeling application ( vmtklab.orobix ). For camera rotation/translation/zooming I am using TrackballControls.js.

controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.dynamicDampingFactor = 0.5;
controls.target.set( pos.x, pos.y, pos.z );

I'm used to camera movement as in vtk ( paraview, etc ) and I can not find how to replicate this behavior in threejs.

See: /

Basically, if I click on the canvas in the center and I move the mouse along the y axis the camera rotates as expected. If I click on the canvas in a point which is distant from the center ( example on the right side of the cube ), the camera rotates in two directions and not only following my mouse movement.

I was expecting that the camera rotates following only the vector between the start point ( mousedown ) and end point generated by mouse movement and NOT considering the position of the start point. It seems rotating around a sphere.

Any suggestions? Best regards Simone

I've been using threejs for a while for the 3D of an image-based modeling application ( vmtklab.orobix. ). For camera rotation/translation/zooming I am using TrackballControls.js.

controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.dynamicDampingFactor = 0.5;
controls.target.set( pos.x, pos.y, pos.z );

I'm used to camera movement as in vtk ( paraview, etc ) and I can not find how to replicate this behavior in threejs.

See: http://jsfiddle/ugxbktLt/5/

Basically, if I click on the canvas in the center and I move the mouse along the y axis the camera rotates as expected. If I click on the canvas in a point which is distant from the center ( example on the right side of the cube ), the camera rotates in two directions and not only following my mouse movement.

I was expecting that the camera rotates following only the vector between the start point ( mousedown ) and end point generated by mouse movement and NOT considering the position of the start point. It seems rotating around a sphere.

Any suggestions? Best regards Simone

• javascript
• camera
• rotation
• three.js
• perspectivecamera

• Yes, the simulated trackball is in the center of the canvas. You appear to prefer to imagine the simulated trackball as being repositioned directly under the mouse on mousedown events. – WestLangley Commented Feb 17, 2015 at 14:55
• Thank you but I cannot understand how to manage the getMouseProjectionOnBall in order to do not always consider the center of the canvas as its center. Any ideas? tnx – daron1337 Commented Feb 17, 2015 at 15:49
• No, sorry - no quick fix ideas. I like your idea, BTW. – WestLangley Commented Feb 17, 2015 at 17:06
• I decided to implement a new control from scratch following the VTK camera controls style. I will submit a pull request asap. – daron1337 Commented Feb 18, 2015 at 12:51
• jsfiddle/e0s61k8f/1 – daron1337 Commented Feb 18, 2015 at 14:16

1 Answer 1

Fixed: With SymmetricTrackballControls.js we can rotate camera independently from the position of the mouse on the canvas but considering only the mouse movement. https://github./mrdoob/three.js/pull/6096