是不是总觉得自己捣鼓的3D场景像块冻住的年糕？相机傻愣愣杵在那不动弹 你只Neng睁睁kan着立方体正面——想kankan它后面有没有藏小彩蛋dou不行 搞半天跟kan监控录像似的 尬得脚趾头抠地 害 其实让相机动起来一点dou不难 今天咱就像唠家常一样 把这事儿掰碎了说清楚 得明白个道理：相机不动 不是它懒 是你没给它「行动自由」 在Three.js里 相机默认就是个「站岗兵」 站哪kan哪死心眼儿 ### 第一步：给相机装个「遥控器」——OrbitControls 想让相机动起来 第一个家伙事儿必须是OrbitControls 这玩意儿就相当于相机的「游戏手柄」：左键拖Neng旋转视角 右键拉Neng推拉远近 滚轮滚Neng上下抬头低头 一套操作下来比逛迪士尼还丝滑 但先别急着抄代码！这玩意儿引错了会直接「罢工」 老版本Three.js可Neng这么引： import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' 但现在Three.jsdou到r150+版本了 正确姿势是从Addons里拿 import { OrbitControls } from 'three/examples/jsm/Addons.js'; 别问我怎么知道的 上次用老方法引报错报得我怀疑人生… 引完之后怎么用？两行代码搞定： 先实例化控制器 记着一定要传两个参数！ const controls = new THREE.OrbitControls; 第一个参数是你的 camera 第二个是canvas——这俩缺一个dou不行！ 为啥要传canvas？就像你玩手机必须在屏幕内划才有用 Ru果鼠标滑到画布外面去 控制器才不会管呢~ 试一下？此时你左键拖一拖立方体…哎哎哎真动了！右键拉一拉还Nengzoom in/out！是不是有点小成就感？ 但先别急着高兴 这里有个致命大坑——Ru果不加「阻尼」 你的相机动起来会跟触电似的：鼠标停了它还疯转两秒才停 ### 第二步：给遥控器加「刹车」——阻尼效果 啥是阻尼？简单说就是给物体加「惯性」——推一下购物车不会立刻停住 会慢慢滑到消停为止 放到相机上就是：鼠标松开后 镜头会慢悠悠停稳 观感直接从「抽筋儿」变「贵妇下午茶」 加阻尼超简单！就一行代码塞进去： // 在实例化controls之后加这句话 controls.enableDamping = true;

​​​

​​​

​​​

​​​

​​​

但是！划重点！重点中的战斗机！: Ru果开了阻尼却不geng新控制器 ) 不管用！一点dou不管用！ 在哪geng新？必须在动画循环里每帧dou调用一次： // tick函数里 function tick { // ...其他逻辑 controls.update; // <- 必填项！不然阻尼等于白开 renderer.render; }

// PS: tick函数是什么不用我多说吧?就是requestAnimationFrame每秒60次刷新那种~

加上这句话再试一遍——"哇哦~" ,是不是顺滑得像德芙巧克力? ### 第三步:让相机动但不「瞎动」—lookAt锁死目标! 有没有过这种情况?你开开心心拖镜头想绕着立方体kan一圈 结果手滑一下—镜头直接怼天上去或者钻地下去 连立方体影子doukan不到…. 别慌!解决办法是给相机动画加上 "目标锁":camera.lookAt; 这句话啥意思?翻译成人话就是:"不管你怎么转,眼睛dou死盯着mesh不放!" mesh.position是什么?就是立方体在3D空间里坐标呀~默认是—也就是原点. 加上这句之后,就算你把镜头推到十万八千里远,它也会乖乖盯着立方体中心. ### 第四步:怕迷路?扔个"指南针"—坐标轴辅助器! 刚学3D的时候,Zui崩溃是什么? 红X绿Y蓝Z傻傻分不清楚!转着转着突然发现:"哎?我刚才把立方体放哪去了?" 别慌!AxesHelper了解一下—简直是3D新人の救星! // 创建坐标轴辅助器const axesHelper = new THREE.AxesHelper;scene.add; 瞬间场景里会冒出三根线:红X绿Y蓝Z<-颜色这么扎眼,想迷路dou难! ### 番外篇:为什么我的教程总没人kan?哦不—为什么百度不收录? 聊到这儿突然想到个题外话—好多朋友问过我:"为啥我写的技术文发出去,百度压根不搭理?" 害…这事儿吧,跟咱们让相机动起来其实一个道理:"搜索引擎也需要'kan得见'你的内容"<-不信听我唠两句:

内容太"水" —复制粘贴别人东西改俩字儿就发?搜索引擎比你妈还懂你抄没抄!

---