three.js实现3D模型任意方向旋转

因为业务需要，我们在公司官网使用Three.js实现了可鼠标拖动任意旋转的3D旋转模型，可是实现之后发现除了Z轴方向都可以任意旋转，但是Z轴方向最多只能旋转180度。找遍全网也没有找到相关的资料来解释错在了哪一步，最终还是在github仓库中找到使用案例才得以解决。

根据官网案例实现相机控制器

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

发现Z轴方向无法任意旋转，只能旋转180度，找遍文档只有如下解释，其他平台也没找到有价值的信息

官网提供的案例也只能在Z轴方向旋转180度

github发现官方案例

无奈之余只能上github看一手源码寻求解决办法，最终发现官方提供了案例演示

一个一个体验，发现这个案例可以实现3D模型任意方向滚动，完美符合需求


赶紧看案例源码，发现该案例使用的是TrackballControls相机控制器，而非官网和大多数博文所说的OrbitControls控制器

使用如下代码，完美解决问题：

import { TrackballControls } from 'three/addons/controls/TrackballControls.js';

controls = new TrackballControls( camera, renderer2.domElement );

吐槽中文文档

不得不吐槽的是，中文文档没有一点关于TrackballControls控制器的介绍，只有英文原版文档有相关说明，但是大部分人直接看英文原版文档着实是有些吃力，这就有点让人唏嘘了。所以大家有条件还是看一手资料会比较好一点。

写在最后：欢迎大家关注作者微信公众号fever code，获取一手技术分享💪