针对静态建筑模型的Three.js查看器，要实现仅在相机静止时单次渲染，完全移除requestAnimationFrame循环是最优方案，具体实现如下：

核心思路 #

• 取消持续渲染循环，仅在用户停止操作相机时触发一次渲染
• 初始加载时完成首次渲染，避免页面空白

代码实现 #

// 初始渲染：页面加载时先渲染一次模型
composer.render();

// 监听控制器的sleep事件：用户停止操作相机时触发渲染
world.camera.controls.addEventListener("sleep", () => {
  composer.render();
});

方案分析 #

1. 原方案1的问题：即使相机静止，requestAnimationFrame仍在持续触发循环，导致composer.render()每帧执行，造成性能浪费
2. 方案2的思路正确，但需补充初始渲染步骤，否则页面加载后会处于空白状态，直到用户第一次操作相机

额外说明 #

如果存在通过代码手动修改相机位置/姿态的场景，只需在修改完成后手动调用一次composer.render()即可。

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