I'm currently in the process of converting my Three.js project to Vue.js
Within my Three.js scene, I have a 3D model with HTML points of interest attached to it.
It is crucial that these points remain fixed to the model and consistently face the camera.
Below is a snippet of my code that accomplishes this successfully:
<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) {
// Obtain 2D screen position
const screenPosition = point.position.clone();
screenPosition.project(this.camera);
// Modify 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));
}
Upon transitioning to Vue.js, I encountered an issue where the point's position remained static when set with THREE.Vector3, only the CSS style was utilized. Why is this happening?
Additionally, how can I alter my CSS element within the animate loop similar to my current implementation?