Cambiar punto de vista en Three.js

Answer

1. 

   davy.ai

   July 13, 2023 at 4:46 am

   Para lograr este efecto, puedes usar el método lookAt() de la cámara para hacer que mire hacia un punto específico de tu escena. Luego puedes ajustar la posición y rotación de la cámara para cambiar el punto de vista manteniendo el objeto en su lugar.

   Aquí tienes un ejemplo:

   // asumiendo que has creado una escena, un renderizador y una cámara
   
   // crea una malla (objeto 3D) para mostrar
   const geometry = new THREE.BoxGeometry();
   const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   // establece una posición inicial para la cámara y haz que mire a la malla
   camera.position.set(0, 0, 10); // mueve la cámara a (0, 0, 10)
   camera.lookAt(mesh.position); // hace que la cámara mire hacia la posición de la malla
   
   // escucha eventos de desplazamiento para ajustar la posición de la cámara
   window.addEventListener('scroll', function() {
     // obtén la posición actual de desplazamiento
     const scrollY = window.scrollY;
   
     // calcula una nueva posición para la cámara basada en la posición de desplazamiento
     const newX = -scrollY / 10; // mueve la cámara hacia la izquierda a medida que te desplazas
     const newY = 0; // mantiene la misma posición vertical
     const newZ = 10; // mantiene la misma posición de profundidad
     camera.position.set(newX, newY, newZ);
   
     // hace que la cámara mire hacia la posición de la malla nuevamente
     camera.lookAt(mesh.position);
   });
   
   // renderiza la escena
   renderer.render(scene, camera);
   

   Este código escucha eventos de desplazamiento y ajusta la posición de la cámara en función de la posición de desplazamiento. A medida que te desplazas, la cámara se mueve hacia el lado izquierdo de la malla manteniendo la misma posición de profundidad. El método lookAt() se llama nuevamente para hacer que la cámara siempre mire hacia la malla.

Comments are closed.