Vue.js集成Three.js时动画循环修改CSS及兴趣点位置失效问题咨询

• DOM获取时机错误：document.getElementsByClassName返回的是HTMLCollection集合而非单个DOM元素，原生环境下你可能刚好取到了第一个匹配元素正常运行，但接入Vue后，你调用setPointsOfInterest时如果组件还未完成DOM渲染，拿到的集合是空的，自然无法修改样式。
• 响应式代理冲突：如果你把存储坐标的THREE.Vector3实例、points数组放到了Vue的响应式数据中，Three.js的实例会被Vue的Proxy代理，导致调用project等原生方法时逻辑异常，无法计算出正确的屏幕坐标。
• 定位基准错位：原生环境下你是相对于body做的定位，接入Vue后如果标记元素放在了带有position: relative/absolute的父容器内，translate的坐标基准会变成父容器而非视口，位置就会错位。

1. 用Vue的ref获取DOM元素，不要使用原生DOM查询方法，并且确保在组件挂载完成后（Vue3的onMounted生命周期、Vue2的mounted钩子）再初始化兴趣点，保证能拿到真实DOM。
2. 所有Three.js相关的实例（包括Vector3、场景、相机、points数组）不要放到Vue的响应式数据中，Vue3可以用markRaw标记为非响应式，Vue2直接挂在实例上不要在data里声明即可，避免被Proxy代理影响原生方法执行。
3. 标记元素的CSS设置position: fixed以视口为定位基准，和原生逻辑保持一致；如果画布不是占满全屏，计算坐标时要替换window.innerWidth/innerHeight为画布容器的实际宽高，同时减去容器的偏移量修正坐标。
4. 动画循环中直接操作DOM元素的style属性即可，不要用Vue的响应式变量绑定transform属性，每帧更新的场景下直接操作DOM性能远高于响应式更新。

完整示例代码（Vue3） #

<template>
  <div class="three-container">
    <canvas ref="canvas"></canvas>
    <!-- 兴趣点用ref绑定DOM -->
    <div ref="point1" class="point point-1">
      <div class="point__label">1</div>
      <div class="point__text">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, markRaw } from 'vue'
import * as THREE from 'three'

const canvas = ref(null)
const point1 = ref(null)
// Three相关变量不要做响应式，直接用普通变量存储
let points = []
let camera, renderer, scene

const initThree = () => {
  // 此处为Three场景初始化逻辑，根据你的实际需求调整
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ canvas: canvas.value })
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 你的3D模型加载逻辑写在这
}

const setPointsOfInterest = () => {
  points = [
    {
      // Vector3用markRaw标记避免被代理
      position: markRaw(new THREE.Vector3(0, 10, 0.2)),
      // 直接取ref绑定的真实DOM元素
      element: point1.value
    }
  ]
}

const animate = () => {
  requestAnimationFrame(animate)
  for (const point of points) {
    if (!point.element) continue
    // 坐标计算逻辑和原生保持一致
    const screenPosition = point.position.clone()
    screenPosition.project(camera)
    const x = screenPosition.x * window.innerWidth * 0.5
    const y = -screenPosition.y * window.innerHeight * 0.5
    // 直接操作DOM样式即可
    point.element.style.transform = `translate(${x}px, ${y}px)`
  }
  renderer.render(scene, camera)
}

onMounted(() => {
  initThree()
  // 组件挂载完成后再初始化兴趣点，保证DOM已经渲染
  setPointsOfInterest()
  animate()
})
</script>

<style scoped>
.three-container {
  position: fixed;
  top: 0;
  left: 0;
}
.point {
  /* 固定定位以视口为基准，和原生逻辑对齐 */
  position: fixed;
  top: 0;
  left: 0;
  /* 不需要点击交互可以设为none，避免遮挡画布事件 */
  pointer-events: auto;
}
</style>

内容的提问来源于stack exchange，提问作者MlleBz