Estoy tratando de escribir un código de muestra de three.js donde tengo un avión y quiero que ese avión gire.
Esta es mi camara:
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(50, 50, 60); camera.lookAt(scene.position);y este es mi avion:
var planeGeometry = new THREE.PlaneGeometry(70, 30, 1, 1); var planeMaterial = new THREE.MeshBasicMaterial({ color: green }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; scene.add(plane);También tengo otro código, pero este es mi código de renderizado y cuadro de animación:
renderScene(); function cameraUpdate() { camera.position.x = cameraRadius * Math.cos(step); camera.position.z = cameraRadius * Math.sin(step); camera.lookAt(scene.position); } function renderScene() { //make update to position, rotation of objects in the scene step += 0.05; cameraUpdate(); requestAnimationFrame(renderScene); renderer.render(scene, camera); }Mi pregunta es que dentro de la función cameraUpdate si no pones
camera.lookAt(scene.position);la rotación se volvió muy extraña y cuando coloco esto dentro de cameraUpdate, ¡obtengo la rotación del plano en el propio eje que se desea!
Mi pregunta es
Gracias de antemano !!!
Si desea que el plano gire por sí solo, debe usar plane.rotation.y += 0.1 en cada cuadro, o algo así de simple. Lo que estás haciendo en cambio es que estás haciendo que la cámara se mueva en círculos alrededor del avión. Piense en ello como caminar en círculos alrededor de una mesa de café. Si mantiene la cabeza mirando hacia adelante, no verá la mesa cuando pase junto a ella. Eso es lo que camera.lookAt() . Hace que la cámara mire un punto en el espacio. Puedes leer sobre esto en los documentos .
scene.position está por defecto en (0, 0, 0) por lo que es solo otra forma de decirle a la cámara que mire al centro de la escena.