如何检测相机/模型旋转事件以让THREE.js文本始终面向用户？

一、监听相机/控制器的变化事件 #

你可以直接监听相机的change事件，或者如果相机是通过控制器（比如OrbitControls）操作的，监听控制器的change事件，这样每次相机旋转或移动时自动更新文本朝向：

监听相机自身的变化事件

const camera = this.viewer.getCamera();
camera.addEventListener('change', () => {
  mesh.quaternion.copy(camera.quaternion);
});

监听控制器的变化事件（更可靠，适用于交互控制场景）

如果你的viewer使用了控制器（比如OrbitControls），监听控制器的事件会更精准：

const controls = this.viewer.getControls(); // 根据你的viewer API获取控制器实例
controls.addEventListener('change', () => {
  mesh.quaternion.copy(this.viewer.getCamera().quaternion);
});

二、更省心的渲染循环更新方案 #

不需要额外监听事件，直接在渲染循环里让文本始终对齐相机方向，这种方式能确保每一帧都同步：

function renderLoop() {
  requestAnimationFrame(renderLoop);
  const camera = this.viewer.getCamera();
  // 两种方式选其一：
  // 1. 让文本看向相机位置（适合需要始终面对相机的场景）
  mesh.lookAt(camera.position);
  // 2. 直接复制相机的四元数（和你的原有逻辑一致，保持和相机同方向）
  // mesh.quaternion.copy(camera.quaternion);
  
  this.viewer.render(); // 调用viewer的渲染方法
}
renderLoop();

三、修正你现有代码的小问题 #

你的TextGeometry参数存在错误：font应该传入加载完成的字体对象（而非字符串），text是要显示的文本内容，修正后的代码示例：

// 先加载字体（用THREE.FontLoader）
const fontLoader = new THREE.FontLoader();
fontLoader.load('路径/到/monaco字体.json', (loadedFont) => {
  const geom = new THREE.TextGeometry("blaaaa", {
    font: loadedFont,
    size: 10,
    height: 0,
    curveSegments: 3,
  });

  geom.computeBoundingBox();
  const mat = new THREE.MeshBasicMaterial({color: 0xFF00FF});

  mesh = new THREE.Mesh(geom, mat);
  mesh.position.set(result.geomVertex.x, result.geomVertex.y, result.geomVertex.z);
  
  // 初始对齐相机
  mesh.quaternion.copy(this.viewer.getCamera().quaternion);
  this.viewer.scene.add(mesh); // 将文本添加到场景中
});

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