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

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.

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

Related

Recent Posts