Estoy tratando de convertir mi proyecto Three.js con Vue.js
Tengo una escena Three.js con un modelo 3D y puntos de interés HTML en este modelo.
Estos puntos deben permanecer fijos al modelo y permanecer frente a la cámara.
Aquí una parte de mi código para hacer eso, funciona bien:
<body> <div class="point point-1"> <div class="point__label">1</div> <div class="point__text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit </div> </div> </body> setPointsOfInterest() { this.points = [ { position: new THREE.Vector3(0, 10, 0.2), element: document.getElementsByClassName('point-1'), }, ]; } animate() { for (const point of this.points) { // Get 2D screen position const screenPosition = point.position.clone(); screenPosition.project(this.camera); // Transform points const x = screenPosition.x * window.innerWidth * 0.5; const y = -screenPosition.y * window.innerHeight * 0.5; point.element.style.transform = `translateX(${x}px) translateY(${y}px)`; } this.renderer.render(this.scene, this.camera); requestAnimationFrame(this.animate.bind(this)); }Con Vue.js, la posición del punto no cambia cuando lo configuro con TRES.Vector3, solo usa el estilo CSS, ¿por qué?
¿Y cómo puedo cambiar mi elemento CSS dentro de mi bucle animado como aquí?
Vue.js recomienda encarecidamente que no seleccione manualmente los elementos DOM que crea porque se encontrará con comandos en conflicto muy rápidamente. Además, crea y destruye elementos en función del ciclo de vida de sus propios componentes, por lo que es posible que no existan cuando intente seleccionar "point-1" .
Con esto en mente, no debería usar documents.getElementsByClassName() para seleccionar y manipular elementos, sino que debería intentar usar el propio sistema Template Refs de Vue. Una vez establecido, debería poder actualizar su posición CSS de esta manera:
this.$refs.point1.style.transform = `translateX(${x}px) translateY(${y}px)`;