Three.js - Rotating a object around certain axis

Question

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 ?

Put the answer in the answer section, not in the question. You can then accept your own answer by clicking on the green checkmark. — WestLangley
– WestLangley, Commented Oct 9, 2014 at 21:10
Well, answer is yours, not mine. I just want to make order, maybe someone will have the same problem. — MrFreeman555
– MrFreeman555, Commented Oct 9, 2014 at 21:19

WestLangley · Accepted Answer · 2017-04-03 17:06:42Z

2

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

edited Apr 3, 2017 at 17:06

answered Oct 9, 2014 at 22:31

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

smatthews1999 Over a year ago

How would you do this temporarily. For example I want an object to rotate on it's local center, but based on a boolean, rotate on another object's center?

Alberto Piras · Accepted Answer · 2019-05-16 15:16:19Z

-1

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

answered May 16, 2019 at 15:16

Alberto Piras

5377 silver badges8 bronze badges

Collectives™ on Stack Overflow

Three.js - Rotating a object around certain axis

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related