我正在尝试将我的Three.js项目转换为Vue.js
我有一个带有3D模型和HTML兴趣点的Three.js场景。
这些点必须保持固定在模型上，并保持面向相机。
这是我的一部分代码，它工作得很好:
<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));
}
使用Vue.js，当我用THREE设置时，点的位置不会改变。Vector3，它只使用CSS样式，为什么?
如何在我的动画循环中改变CSS元素呢?
Vue.js强烈建议您不要手动选择它构建的DOM元素，因为您将很快遇到冲突的命令。此外，它还构建&基于它自己的组件生命周期销毁元素，所以当您尝试选择"point-1"时，它们可能不存在。
documents.getElementsByClassName()来选择和操作元素，相反，你应该尝试使用Vue自己的模板Refs系统。一旦建立，你应该能够像这样更新它的CSS位置:
this.$refs.point1.style.transform = `translateX(${x}px) translateY(${y}px)`;