How to rotate an object to match a normal vector in three.js?

user_1497454 0
Viewed 280

I have an object, lets say a car, and it's z-rotation is already set so its facing the direction its heading towards.

The car is also on a ground which is on a slope (plane) that is represented by the normalized normal vector (nx, ny, nz). How can I now rotate the car's x and y axis so that it aligns with the slope? Which is to say the car's own normal vector matches (nx, ny, nz)?

three.js vector javascript
1 Answers

Just nest your car Mesh inside the ground Mesh, so the ground's rotations get inherited from parent to child. This way you can set the parent's rotation as the ground slope, and all you have to worry is turning the car around its local y-axis without any extra calculations.

Here's a simple demo:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,  1, 200);
camera.position.z = 75;

const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.querySelector("#canvas")
});
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new THREE.OrbitControls( camera, renderer.domElement );

// World axes
const axesHelper = new THREE.AxesHelper( 30 );
scene.add( axesHelper );

// Create green ground plane
const planeGeom = new THREE.PlaneGeometry(60, 60, 20, 20);
planeGeom.rotateX(Math.PI / 2);
const slope = new THREE.Mesh(
  planeGeom,
  new THREE.MeshBasicMaterial({ color: 0x99ff00, side: THREE.DoubleSide, wireframe: true })
);
scene.add(slope);

// Add purple car
const geometry = new THREE.BoxGeometry( 10, 5, 20);
const material = new THREE.MeshNormalMaterial( { wireframe: false } );
const car = new THREE.Mesh( geometry, material );
car.position.y = 2.5;
slope.add( car );

// Add car axes
const carAxes = new THREE.AxesHelper( 20 );
car.add( carAxes );

function animate(time) {
  // Spin car around its own y-axis
  car.rotation.y += 0.005;
  
  // Swing ground plane back and forth
  slope.rotation.z = Math.sin(time * 0.001) * 0.5;

renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate(0);
html, body { margin:0; padding:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

<canvas id="canvas"></canvas>

Or if you want to nest it inside an empty object, you can place it inside a Group.

user_26085150
Related