If you're looking to achieve this effect, one way to do it is by implementing a hierarchical structure in your scene. One solution is to introduce a group
node. By adding the group
as a child to the scene
, and then adding your mesh
as a child to that group
, you create a hierarchy in which the tilt is applied to the group
rather than the mesh
.
this.mesh = new Mesh(this.geometry, this.material);
/* Create a new group */
this.group = new THREE.Group();
/* Tilt the group */
this.group.rotateOnAxis(this.axis, Math.degToRad(25));
/* Add the mesh to the group */
this.group.add(this.mesh);
/* Add the group to the scene */
this.scene.add(group);
By adding this hierarchy, any children (like the mesh
) of the group
will inherit the tilt as well. This method offers a way to combine the tilt with locally applied rotation to achieve the desired axis-based rotation.
For a visual demonstration and sample code, you can check out this codesandbox.
Another Approach
Alternatively, you can use the rotateY()
method to apply a rotation transform around the mesh
object's local frame:
this.mesh.rotateY(0.005);
// this.mesh.rotation.y += 0.005 <-- not necessary
Here's a working example demonstrating this approach.