相机控件 · 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

代码要点


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

// 场景
const scene = new THREE.Scene();// 创建场景
const geometry = new THREE.BoxGeometry(10, 60, 100); //几何体
const material = new THREE.MeshLambertMaterial(); //材质 
const mesh = new THREE.Mesh(geometry, material); //网格模型
mesh.position.set(0, 10, 0); //网格模型位置
scene.add(mesh);  //场景添加网格模型

// AxesHelper
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

// 光源
const pointLight = new THREE.DirectionalLight(0xff00ff, 1.0); //颜色、强度
pointLight.position.set(200, 300, 400);   //位置
scene.add(pointLight); //点光源添加到场景中

// 光源参考线
const dirLightHelper = new THREE.DirectionalLightHelper(pointLight, 5, 0xff0000);
scene.add(dirLightHelper);

// 相机
const camera = new THREE.PerspectiveCamera();  //相机
camera.position.set(200, 200, 200); //相机位置
camera.lookAt(0, 10, 0);   //相机观察位置

// 渲染器
const renderer = new THREE.WebGLRenderer(); // 创建渲染器
const box = document.getElementById('box');
renderer.setSize(box.clientWidth, box.clientHeight); //渲染区域
renderer.render(scene, camera); //执行渲染
box.appendChild(renderer.domElement);

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
    console.log(camera.position)
});//监听鼠标、键盘事件

完整源码：GitHub

小结