Tengo un objeto, digamos un automóvil, y su rotación z ya está configurada, por lo que está mirando en la dirección hacia la que se dirige.
El automóvil también está en un terreno que está en una pendiente (plano) que está representado por el vector normal normalizado (nx, ny, nz) . ¿Cómo puedo ahora rotar los ejes x e y del automóvil para que se alinee con la pendiente? Lo que quiere decir que el propio vector normal del automóvil coincide (nx, ny, nz) ?
Simplemente inserte la malla de su automóvil dentro de la malla del suelo, de modo que las rotaciones del suelo se hereden de padres a hijos. De esta manera, puede establecer la rotación del padre como la pendiente del suelo y todo lo que tiene que preocuparse es girar el automóvil alrededor de su eje y local sin ningún cálculo adicional.
Aquí hay una demostración simple:
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> O si desea anidarlo dentro de un objeto vacío, puede colocarlo dentro de un Group .