I'm trying to convert my Three.js project with Vue.js
I have a Three.js scene with a 3D model and HTML points of interest on this model.
These points must remain fixed to the model and remain facing the camera.
Here a part of my code to do that, it works fine :
<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));
}
With Vue.js, the point's position doesn't change when I set it with THREE.Vector3, it's only use the CSS style, why ?
And how can I change my CSS element inside my animate loop like here ?
Vue.js strongly recommends you don't manually select the DOM elements it builds because you'll run into conflicting commands very quickly. Additionally, it builds & destroys elements based on its own components lifecycle, so they may not exist by the time you try to select "point-1".
With this in mind, you shouldn't be using documents.getElementsByClassName() to select and manipulate elements, instead you should try using Vue's own Template Refs system. Once established, you should be able to update its CSS position like this:
this.$refs.point1.style.transform = `translateX(${x}px) translateY(${y}px)`;