Vue.js, Three.js, 如何在动画循环中改变CSS样式元素

Question

我正在尝试使用 Vue.js 转换我的 Three.js 项目

我有一个 Three.js 场景，其中包含 3D 模型和该模型上的 HTML 兴趣点。

这些点必须保持固定在模型上并保持面向相机。

这是我的代码的一部分来做到这一点，它工作正常：

<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 元素？

Answer 1

Vue.js 强烈建议你不要手动选择它构建的 DOM 元素，因为你会很快遇到冲突的命令。 此外，它根据自己的组件生命周期构建和销毁元素，因此在您尝试选择"point-1"时它们可能不存在。

考虑到这一点，您不应该使用documents.getElementsByClassName()来选择和操作元素，而应该尝试使用 Vue 自己的模板引用系统。 一旦建立，你应该能够像这样更新它的 CSS 位置：

this.$refs.point1.style.transform = `translateX(${x}px) translateY(${y}px)`;

Vue.js, Three.js, 如何在动画循环中改变CSS样式元素

问题描述

1 个解决方案

解决方案1
0 2021-10-19 21:46:28

Vue.js, Three.js, 如何在动画循环中改变CSS样式元素

问题描述

1 个解决方案

解决方案1 0 2021-10-19 21:46:28

解决方案1
0 2021-10-19 21:46:28