如何旋转 object 以匹配 three.js 中的法线向量？

Question

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) ?

Answer 1

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 .