相机控件

OrbitControls

▶ 在线运行案例

你将学到什么

• OrbitControls 的基本用法与事件监听
• 手动渲染模式 vs 动画循环渲染
• 阻尼 enableDamping 的配置要点

效果说明

鼠标左键旋转、滚轮缩放、右键平移，围绕场景中心轨道式观察立方体。本案例在 change 事件里 按需渲染，而非持续 rAF。

核心概念

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);

操作	默认按键
旋转	左键拖拽
缩放	滚轮
平移	右键拖拽

两种渲染策略

1. 按需渲染（本案例）

controls.addEventListener('change', () => {
    renderer.render(scene, camera);
});
// 静止时不消耗 GPU

2. 动画循环（推荐配合阻尼）

controls.enableDamping = true;
function animate() {
    requestAnimationFrame(animate);
    controls.update();  // 阻尼必须每帧 update
    renderer.render(scene, camera);
}

实现步骤

1. 创建受光场景（Lambert + DirectionalLight + Helper）
2. 初始化 OrbitControls
3. 监听 change → render

代码要点

const controls = new OrbitControls(camera, renderer.domElement);

controls.addEventListener('change', () => {
    renderer.render(scene, camera);
});

目标点

默认围绕 (0,0,0) 旋转。可通过 controls.target.set(x,y,z) 改变观察中心。

源码

完整源码见 在线案例。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// ... scene, mesh, light, camera, renderer ...

const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => renderer.render(scene, camera));
renderer.render(scene, camera);

小结

• OrbitControls 是 Three.js 项目 最常用的交互控件
• 开阻尼 → 必须 rAF 循环 + 每帧 controls.update()
• 下一篇：动画 — requestAnimationFrame 渲染循环

入门案例 · Three.js · 12/15