Tips on rotating a 3D shape using axis in three.js

Question

Tips on rotating a 3D shape using axis in three.js

Help needed with rotation in three.js I am facing a challenge when trying to rotate a 3D cube in one of my games.

//initialize
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 [<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0819e9e9ef0c3d8d1c0d59edcd5ded7c4d8">[email protected]</a>]
    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

When using values (1, 0, 0) for (x, y, z), the cube is able to rotate. However, the issue arises as the cube rotates on its own axis, preventing it from rotating as intended.

I came across a page How to rotate a Three.js Vector3 around an axis?, which explains rotating a Vector3 point around the world axis.

I attempted using matrixRotationWorld like this:

@mesh.matrixRotationWorld.x += x * Math.PI / 180
@mesh.matrixRotationWorld.y += y * Math.PI / 180
@mesh.matrixRotationWorld.z += z * Math.PI / 180

Unfortunately, this approach did not yield the desired results. I am unsure if I am using it incorrectly or if there are alternative methods...

Therefore, how can I make the 3D cube rotate around the world's axis?

javascript coffeescript three.js

Answer 1

Answer №1

Starting from version r59, three.js has introduced three handy methods for rotating an object around its axis.

object.rotateX(angle);
object.rotateY(angle);
object.rotateZ(angle);

Answer 2

Starting from version r59, three.js has introduced three handy methods for rotating an object around its axis.

object.rotateX(angle);
object.rotateY(angle);
object.rotateZ(angle);

Answer 3

Answer №2

Here are two essential functions that I utilize for matrix rotations. These functions have the capability to rotate around arbitrary axes. If you wish to rotate an object using the world's axes, it is recommended to make use of the second function, rotateAroundWorldAxis().

// Function to 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);

    object.matrix.multiply(rotObjectMatrix);

    object.rotation.setFromRotationMatrix(object.matrix);
}

var rotWorldMatrix;
// Function to rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) {
    rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

    rotWorldMatrix.multiply(object.matrix); 

    object.matrix = rotWorldMatrix;

    object.rotation.setFromRotationMatrix(object.matrix);
}

To achieve a rotation of 90 degrees on the x-axis, ensure that you call these functions within your anim function (requestAnimFrame callback) like so:

var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);

Answer 4

Here are two essential functions that I utilize for matrix rotations. These functions have the capability to rotate around arbitrary axes. If you wish to rotate an object using the world's axes, it is recommended to make use of the second function, rotateAroundWorldAxis().

// Function to 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);

    object.matrix.multiply(rotObjectMatrix);

    object.rotation.setFromRotationMatrix(object.matrix);
}

var rotWorldMatrix;
// Function to rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) {
    rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

    rotWorldMatrix.multiply(object.matrix); 

    object.matrix = rotWorldMatrix;

    object.rotation.setFromRotationMatrix(object.matrix);
}

To achieve a rotation of 90 degrees on the x-axis, ensure that you call these functions within your anim function (requestAnimFrame callback) like so:

var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);

Answer 5

Answer №3

After updating to the latest release (r52), I found that I needed to make some adjustments to the rotateAroundWorldAxis function. It seems that the previous code was no longer compatible, as getRotationFromMatrix() has been replaced with 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 );
}

Answer 6

After updating to the latest release (r52), I found that I needed to make some adjustments to the rotateAroundWorldAxis function. It seems that the previous code was no longer compatible, as getRotationFromMatrix() has been replaced with 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 );
}

Answer 7

Answer №4

When using R55, make sure to update
rotationMatrix.multiplySelf( object.matrix );
with
rotationMatrix.multiply( object.matrix );

Answer 8

When using R55, make sure to update
rotationMatrix.multiplySelf( object.matrix );
with
rotationMatrix.multiply( object.matrix );

Answer 9

Answer №5

There was an update in Three.js R59 where the syntax

object.rotation.setEulerFromRotationMatrix(object.matrix);

was modified to

object.rotation.setFromRotationMatrix(object.matrix);

It's amazing how quickly Three.js is evolving!

Answer 10

There was an update in Three.js R59 where the syntax

object.rotation.setEulerFromRotationMatrix(object.matrix);

was modified to

object.rotation.setFromRotationMatrix(object.matrix);

It's amazing how quickly Three.js is evolving!

Answer 11

Answer №6

In the event that you encounter r52, remember that the function is labeled as setEulerFromRotationMatrix as opposed to getRotationFromMatrix

Answer 12

In the event that you encounter r52, remember that the function is labeled as setEulerFromRotationMatrix as opposed to getRotationFromMatrix

Answer 13

Answer №7

By the time you reach level 59, manipulating rotation becomes more manageable (specifically rotating around the x-axis):

bb.GraphicsEngine.prototype.adjustRotation = function ( object, xRotation)
{
    var euler = new THREE.Euler( xRotation, 0, 0, 'XYZ' );
    object.position.applyEuler(euler);
}

Answer 14

By the time you reach level 59, manipulating rotation becomes more manageable (specifically rotating around the x-axis):

bb.GraphicsEngine.prototype.adjustRotation = function ( object, xRotation)
{
    var euler = new THREE.Euler( xRotation, 0, 0, 'XYZ' );
    object.position.applyEuler(euler);
}

Answer 15

Answer №8

Here is a snippet of code in CoffeeScript for Three.js R66:

THREE.Object3D.prototype.rotateAroundWorldAxis = (axis, radians) ->
  worldMatrix = new THREE.Matrix4()
  worldMatrix.makeRotationAxis axis.normalize(), radians
  worldMatrix.multiply this.matrix
  this.matrix = worldMatrix
  this.rotation.setFromRotationMatrix this.matrix

Answer 16

Here is a snippet of code in CoffeeScript for Three.js R66:

THREE.Object3D.prototype.rotateAroundWorldAxis = (axis, radians) ->
  worldMatrix = new THREE.Matrix4()
  worldMatrix.makeRotationAxis axis.normalize(), radians
  worldMatrix.multiply this.matrix
  this.matrix = worldMatrix
  this.rotation.setFromRotationMatrix this.matrix

Answer 17

Answer №9

This is the method I used:

I developed the 'ObjectControls' module specifically for ThreeJS, allowing users to rotate a single OBJECT or a Group, rather than the entire SCENE.

First, include the library:

<script src="ObjectControls.js"></script>

To use it, simply add the following code:

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

For a live demonstration, please visit:

Feel free to check out the repository here: https://github.com/albertopiras/threeJS-object-controls.

Answer 18

This is the method I used:

I developed the 'ObjectControls' module specifically for ThreeJS, allowing users to rotate a single OBJECT or a Group, rather than the entire SCENE.

First, include the library:

<script src="ObjectControls.js"></script>

To use it, simply add the following code:

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

For a live demonstration, please visit:

Feel free to check out the repository here: https://github.com/albertopiras/threeJS-object-controls.

Tips on rotating a 3D shape using axis in three.js

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Node.js Request Encoding Using Google Translate

Countdown with precision! This timer will begin at the one-hour mark

The latest images are now visible in the table alongside the existing images that were previously added

Having trouble with Next Js and Typescript, specifically receiving the error TS2304: Unable to locate name 'AppProps'?

What could be the reason why PhantomJS is not able to catch the <script> tags in the opened HTML using webpage.onConsoleMessage function?

What is the best way to display the angular bootstrap modal only upon the initial page load?

Utilizing Node.js and express to promptly address client requests while proceeding with tasks in the nextTick

Ways to conceal a parameter in Angularjs while functioning within the ng-bind directive

Exploring the functionality of textareas within iframes on iPad

Encountering issues in transmitting form data to a Node server from Angular

show button after the page has finished loading

Having trouble getting @vercel/ncc to work, keeps throwing a "Module not found" error

Explore all potentialities within an array of objects by examining and contrasting their key values

What is the best way to display an image path and add it to the Ajax success function in a CodeIgniter application?

An error was encountered when attempting to reference an external JavaScript script in the document

Struggling to deal with conditionals in Express

Is there a way to incorporate hyperlinks into the Application column of my v-data-table component?

Unexpected behavior encountered when looping through a list in Vue <template> markup

Expanding and collapsing a single item in a ListView with React Native

The value is currently unset in the TypeScript language