How can I rotate a mesh by 90 degrees in ThreeJS?

In Three.js, to rotate a mesh by 90 degrees, you can achieve this by modifying the rotation property of the mesh. Angles in Three.js are specified in radians, so you must first convert degrees to radians. The formula for converting degrees to radians is angle * (π / 180).

Here is a specific example demonstrating how to create a cube mesh and rotate it 90 degrees around the Y-axis:

javascript
// Import Three.js
import * as THREE from 'three';

// Create a scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube geometry
const geometry = new THREE.BoxGeometry();

// Create a material
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

// Create a mesh
const cube = new THREE.Mesh(geometry, material);

// Add the mesh to the scene
scene.add(cube);

// Rotate the mesh 90 degrees around the Y-axis
cube.rotation.y = 90 * Math.PI / 180; // Convert 90 degrees to radians

// Render the scene
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

In this example, I first set up a basic Three.js scene, camera, and renderer. I then define a cube mesh with a green material and add it to the scene. The key line cube.rotation.y = 90 * Math.PI / 180; converts 90 degrees to radians and applies it to the mesh's Y-axis rotation property.

Finally, I define the animate function to continuously render the scene, making the rotation effect visible in the browser. In Three.js, rotating a mesh object typically involves modifying its rotation property, which is an Euler object containing rotation angles around the x, y, and z axes. To rotate a mesh by 90 degrees, you must determine the axis of rotation. For instance, to rotate around the y-axis, use:

javascript
// Assuming mesh is your mesh object
mesh.rotation.y = Math.PI / 2; // Rotate 90 degrees

Here, radians are used instead of degrees, as Three.js rotation parameters are specified in radians. 90 degrees equals π/2 radians.

Example

Assume you are creating a simple 3D scene with a cube and want to rotate it 90 degrees around the y-axis. Here is a complete example:

javascript
// Import Three.js
import * as THREE from 'three';

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube geometry and material
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// Add the cube to the scene
scene.add(cube);

// Rotate the cube 90 degrees around the y-axis
cube.rotation.y = Math.PI / 2;

// Set the camera position
camera.position.z = 5;

// Create an animation loop to render the scene
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

In this example, I create a cube, rotate it 90 degrees around the y-axis, and render it using an animation loop. This approach can be applied to any mesh object by adjusting the rotation axis and angle.