CODEWITHSUNDEEP
three.js
MrFreeman555
MrFreeman555

Reputation: 98

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 ?

Upvotes: 1

Views: 5228

Answers (2)

Alberto Piras
Alberto Piras

Reputation: 537

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

Upvotes: -1

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 2

Related Questions