Three.js 相机控件教程

相机控件 ·OrbitControls· ▶ 在线运行案例

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

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

效果说明

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

核心概念

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

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

两种渲染策略

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

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

实现步骤

• 创建受光场景（Lambert + DirectionalLight + Helper）
• 初始化 OrbitControls
• 监听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

  小结

  • 本文提供相机控件完整 Three.js 源码与在线 Demo，建议先运行案例再改 uniform/参数做二次实验
  • 更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库