如何在HTML文件中引入并使用Three.js的OrbitControls？

OrbitControls 确实不属于Three.js的核心库，它是Three.js官方维护的附加控件，需要单独引入后才能使用，具体步骤如下：

1. 获取并引入OrbitControls脚本 #

OrbitControls的脚本依赖Three.js核心库，必须在引入three.js之后再加载它：

• 本地使用：从Three.js的官方代码仓库中找到OrbitControls.js文件（路径为examples/jsm/controls/OrbitControls.js），下载后放到你的项目目录中（比如js/addons/controls/），然后在HTML中添加引入标签：

<script src="js/three.js"></script>
<!-- 注意路径要和你的文件存放位置对应 -->
<script src="js/addons/controls/OrbitControls.js"></script>

2. 初始化并使用OrbitControls #

在你的JavaScript代码中，创建场景、相机、渲染器等基础对象后，即可初始化控制器，并在动画循环中更新它：

// 假设你已经创建了scene、camera、renderer对象
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 可选：设置控制器参数，比如启用阻尼效果让视角切换更平滑
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// 动画循环中必须调用controls.update()，确保控制器状态同步
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

注意事项 #

• 构造函数的第二个参数必须传入渲染器的DOM元素，这样控制器才能监听鼠标、触摸等交互事件。
• 如果启用了阻尼效果，必须在动画循环中调用controls.update()，否则阻尼效果不会生效。

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