一、效果如图所示：二、原理三、完整代码：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监测鼠标事件，当鼠标旋转缩放三维场景时，相机位置会发生改变，打印出此时浏览器