因为业务需要,我们在公司官网使用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
,获取一手技术分享💪