How to rotate a 3D object on axis three js

Question

I have a great problem about the rotation in three js I want to rotate my 3D cube in one of my game     init geometry   new THREE CubeGeometry grid  grid  grid material   new THREE MeshLambertMaterial  color 0xFFFFFF   Math random    shading THREE FlatShading  overdraw true  transparent  true  opacity 0 8  for i in  1    shape length      othergeo   new THREE Mesh new THREE CubeGeometry grid  grid  grid      othergeo position x   grid    shape i  0      othergeo position y   grid    shape i  1      THREE GeometryUtils merge geometry  othergeo  mesh   new THREE Mesh geometry  material    rotate  mesh rotation y    y   Math PI   180  mesh rotation x    x   Math PI   180  mesh rotation z    z   Math PI   180   and  x  y  z  may be  1  0  0   then the cube can rotate  but the problem is the cube rotate on its own axis so after it has rotated  it can t rotate as expected   I find the page How to rotate a Three js Vector3 around an axis   but it just let a Vector3 point rotate around the world axis   and I have tried to use matrixRotationWorld as   mesh matrixRotationWorld x    x   Math PI   180  mesh matrixRotationWorld y    y   Math PI   180  mesh matrixRotationWorld z    z   Math PI   180   but it doesn t work  I don t whether I used it in a wrong way or there are other ways    so  how to let the 3D cube rotate around the world s axis

User · Answer

I needed the rotateAroundWorldAxis function but the above code doesn t work with the newest release  r52   It looks like getRotationFromMatrix   was replaced by setEulerFromRotationMatrix    function rotateAroundWorldAxis  object  axis  radians          var rotationMatrix   new THREE Matrix4         rotationMatrix makeRotationAxis  axis normalize    radians        rotationMatrix multiplySelf  object matrix                             pre-multiply     object matrix   rotationMatrix      object rotation setEulerFromRotationMatrix  object matrix

User · Answer

I solved in 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   lt script src  quot ObjectControls js quot  gt  lt  script gt  Usage  var controls   new 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

User · Answer

Since release r59  three js provides those three functions to rotate a object around object axis  object rotateX angle   object rotateY angle   object rotateZ angle

User · Answer

Somewhere around r59 this gets easier  rotate around x    bb GraphicsEngine prototype calcRotation   function   obj  rotationX        var euler   new THREE Euler  rotationX  0  0   XYZ         obj position applyEuler euler

User · Answer

In Three js R66  this is what I use  CoffeeScript version    THREE Object3D prototype rotateAroundWorldAxis    axis  radians  - gt    rotWorldMatrix   new THREE Matrix4     rotWorldMatrix makeRotationAxis axis normalize    radians   rotWorldMatrix multiply this matrix   this matrix   rotWorldMatrix   this rotation setFromRotationMatrix this matrix

User · Answer

In Three js R59  object rotation setEulerFromRotationMatrix object matrix   has been changed to object rotation setFromRotationMatrix object matrix    3js is changing so rapidly  D

User · Answer

with r55 you have to change      rotationMatrix multiplySelf  object matrix    to     rotationMatrix multiply  object matrix

User · Answer

Here are the two functions I use  They are based on matrix rotations  and can rotate around arbitrary axes  To rotate using the world s axes you would want to use the second function rotateAroundWorldAxis        Rotate an object around an arbitrary axis in object space var rotObjectMatrix  function rotateAroundObjectAxis object  axis  radians        rotObjectMatrix   new THREE Matrix4        rotObjectMatrix makeRotationAxis axis normalize    radians           old code for Three JS pre r54         object matrix multiplySelf rotObjectMatrix           post-multiply        new code for Three JS r55       object matrix multiply rotObjectMatrix           old code for Three js pre r49         object rotation getRotationFromMatrix object matrix  object scale          old code for Three js r50-r58         object rotation setEulerFromRotationMatrix object matrix          new code for Three js r59       object rotation setFromRotationMatrix object matrix      var rotWorldMatrix     Rotate an object around an arbitrary axis in world space        function rotateAroundWorldAxis object  axis  radians        rotWorldMatrix   new THREE Matrix4        rotWorldMatrix makeRotationAxis axis normalize    radians           old code for Three JS pre r54          rotWorldMatrix multiply object matrix          new code for Three JS r55       rotWorldMatrix multiply object matrix                     pre-multiply      object matrix   rotWorldMatrix          old code for Three js pre r49         object rotation getRotationFromMatrix object matrix  object scale          old code for Three js pre r59         object rotation setEulerFromRotationMatrix object matrix          code for r59       object rotation setFromRotationMatrix object matrix       So you should call these functions within your anim function  requestAnimFrame callback   resulting in a rotation of 90 degrees on the x-axis   var xAxis   new THREE Vector3 1 0 0   rotateAroundWorldAxis mesh  xAxis  Math PI   180

User · Answer

Just in case   in r52 the method is called setEulerFromRotationMatrix instead of getRotationFromMatrix

[javascript] How to rotate a 3D object on axis three.js?

Examples related to javascript

Examples related to coffeescript

Examples related to three.js