作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第185篇入门文章

Three.js入门-相机控制器概念介绍在开始前，我们先看一下效果，我在场景中创建了一个立方体，当我们点击鼠标左键并拖动时，可以旋转相机视角，滚动鼠标滚轮可以缩放相机视角。相信看了动图效果，大家对相机控件有了一个直观的认识。它是Three.js中用于控制相机的工具，可以帮助用户在3

一、效果如图所示：二、原理三、完整代码：index.jsimport*asTHREEfrom'three';import{  OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';

import{OrbitControls}from'three/examples/jsm/controls/OrbitControls';useEffect(()=>{//初始化OrbitControlsconstcontrols=newOrbitControls(camera,renderer.domElement);//设置控制参数controls.enableDamping=true;//平滑化运动c

OrbitControls是Three.js库中一个非常流行的相机控制组件，它允许用户通过鼠标（或触控设备）来旋转、缩放和平移场景中的相机，从而从不同的角度和距离观察场景。下面是如何在Three.js中使用OrbitControls的方法：1.引入OrbitControls首先需要从Three.js的CDN或本地路径中引入O

第一步：先测量三维模型场景中要渲染的范围尺寸第二步：根据模型中测量的结果设置相机近似位置第三步：使用相机控件OrbitControls辅助设置相机位置如果网页中渲染的效果不满足自己需求，用OrbitControls监测鼠标事件，当鼠标旋转缩放三维场景时，相机位置会发生改变，打印出此时浏览器