ThreeJS Orbit Controls报错：Uncaught TypeError: b[c].call is not a function

嘿，这个问题我之前踩过坑，一眼就能看出问题所在：你给OrbitControls的change事件绑定的是renderer对象，但事件监听器需要传入的是一个函数，不是实例对象！

错误原因分析 #

当OrbitControls检测到相机视角变化时，会触发change事件并尝试调用你传入的监听器。但你写的controls.addEventListener('change', renderer);里，renderer是THREE.WebGLRenderer的实例，不是可执行的函数，所以当代码尝试调用它的call方法时，就会抛出你看到的那个错误。

解决方案 #

把监听器改成能触发渲染的函数就行，有两种常用写法：

1. 用箭头函数直接包裹渲染逻辑（简洁直观）：

// 替换原来错误的事件绑定代码
controls.addEventListener('change', () => renderer.render(scene, camera));

2. 定义单独的处理函数（适合后续需要扩展逻辑的场景）：

function onControlsChange() {
  renderer.render(scene, camera);
}
controls.addEventListener('change', onControlsChange);

补充说明 #

其实你的animate函数已经通过requestAnimationFrame在持续渲染场景了，但绑定change事件可以确保控件操作时立即更新画面，避免视觉延迟，这个需求是合理的，只要传对监听器类型就没问题。

修正后的关键代码片段示例：

let controls = new THREE.OrbitControls(camera, renderer.domElement);
// 修正后的事件绑定
controls.addEventListener('change', () => renderer.render(scene, camera));
controls.minDistance = 500;
controls.maxDistance = 1500;
controls.dampingFactor = 0.25;
controls.rotateSpeed = 0.5;
// ... 其他控件配置代码

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