Three.js - Rotating a object around certain axis

问题

I've used THREE={REVISION:"68"}

I've already done rotation (OBJECT_X) by axis "z"http://jsfiddle.net/eVkgs/39/

When I change position OBJECT_X: CubeGeometry.applyMatrix( new THREE.Matrix4().makeTranslation( 20,Cube_height/2, 0 ) ); http://jsfiddle.net/eVkgs/40/

Object is still rotate by axis "z" becouse I setup : OBJECT_X.rotation.z += 0.3*Math.PI/30;

Question : how should look code that allow to rotate around axis which this object is placed ?

回答1:

An object will rotate around its origin in its local coordinate system. If you want to shift the origin, then you have to translate the geometry itself. Here is the pattern to follow:

geometry.translate( dx, dy, dz );

You can now create a mesh from the geometry, and set the mesh position:

mesh.position.set( x, y, z );

If you rotate the mesh, it will rotate around its new origin, and the mesh will be located at the point ( x, y, z ).

three.js r.84

回答2:

I solved this problem this way

I created the ObjectControls module for ThreeJS that allows you to rotate a single OBJECT (or a Group), and not the SCENE

Include the libary:

then

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

You can find here a live demo here: https://albertopiras.github.io/threeJS-object-controls/

Here is the repo: https://github.com/albertopiras/threeJS-object-controls.

I hope this helps

来源：https://stackoverflow.com/questions/26287238/three-js-rotating-a-object-around-certain-axis

标签

three.js