使用CDN引入Three.js与OrbitControl版本不兼容问题咨询

核心原因：版本强绑定+API用法变更 #

Three.js的官方示例组件（比如OrbitControls）和核心库版本是强绑定的，不同版本的Controls依赖对应版本核心库的API实现。你遇到的问题主要有两个关键点：

1. 新版本Controls的用法有更新
   从0.126到0.148版本，OrbitControls的初始化和运行逻辑有调整：

• 必须明确传入renderer.domElement作为构造函数的第二个参数（旧版可能允许省略或有默认处理）
• 如果启用了阻尼效果（enableDamping = true），必须在动画循环中调用controls.update()，否则控制会失效
• 内部依赖的核心类方法（比如相机的事件监听、坐标计算）有变更，旧版代码写法无法适配新版Controls

2. 跨版本“巧合适配”
   你用0.148核心库搭配0.126.1的Controls能工作，是因为旧版Controls的API逻辑刚好和你当前的代码写法匹配，没有用到新版核心库变更后的方法，相当于“碰巧兼容”，但这是不规范的用法，后续版本更新大概率会出问题。

解决办法：规范使用同版本组件 #

确保OrbitControls和Three.js核心库版本一致，同时按照新版写法调整代码：

import * as THREE from 'https://unpkg.com/three@0.148.0/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/three@0.148.0/examples/jsm/controls/OrbitControls.js'

// 初始化基础场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 正确初始化OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 可选：启用平滑阻尼
controls.enableDamping = true;

// 动画循环中必须调用controls.update()
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

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