Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to realize the angle rotation of model objects in Three.js. It has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

In the Three.js scene, loading the 3D model requires setting the angular rotation of the model with reference to the x, y and z axes. For example, the simple idea of loading the 3D pipeline in Three.js requires adjusting the angles of the three axes after setting the position of the 3D pipeline, so that the model can be consistent with the starting point and ending point of the pipeline.

When loading a 3D model, you can directly set the rotation properties of the three axes of the model:

model.rotation.x = -Math.PI / 4;

model.rotation.z = Math.PI / 4;

model.rotation.y = Math.PI / 2;

However, in the actual scene, the result of setting the model display in this way is incorrect. According to the description document of Three.js, the transformation of the model in the scene needs to be transformed by matrix. The specific code implementation is as follows:

//Function of model object rotation, setting transformation of one coordinate axis at a time

function rotateAroundWorldAxis(object, axis, radians) {

let rotWorldMatrix = new THREE.Matrix4();

rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

rotWorldMatrix.multiply(object.matrix);

object.matrix = rotWorldMatrix;

object.rotation.setFromRotationMatrix(object.matrix);

}

//Call the mode to set the rotation of x, y and z axes

let xAxis = new THREE.Vector3(1, 0, 0);

let yAxis = new THREE.Vector3(0, 1, 0);

let zAxis = new THREE.Vector3(0, 0, 1);

//Model, rotation axis and rotation angle (radians)

rotateAroundWorldAxis(model, xAxis, Math.PI / 8);

For previous versions of Three.js, the function implementation is somewhat different

//Three.js r49 before:

object.rotation.getRotationFromMatrix(object.matrix, object.scale);

//Three.js r59 before:

object.rotation.setEulerFromRotationMatrix(object.matrix);

For some of the existing shape objects in Three.js, you can set the transformation of the three axes directly, and you don't need to transform them like this. Thank you for reading this article carefully. I hope that the article "How to Realize Model Object Angle Rotation in Three.js" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.