javascript - threeJS Trackball Controls camera rotation - Stack Overflow

admin管理员组

文章数量:1431927

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

Share Improve this question Follow asked Feb 17, 2015 at 10:44 daron1337daron1337 7111 silver badge55 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptthreeJS Trackball Controls camera rotationStack Overflow