编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

THREEJS学习之路-镜头切换动画(threejs 相机旋转)

wxchong 2024-07-20 08:25:11 开源技术 21 ℃ 0 评论

THREEJS加载fbx模型,经过镜头动画跳转到相应的目标位置,效果如下图:

涉及依赖:

THREEJS 128版本
FBXLoader
OrbControls
TWEENJS

threejs加载模型使用的FBXLoader库,其中中OrbitControls可以控制模型的旋转、移动以及缩放,但是如果要实现镜头飞行到特定区域需要自己去实现相应代码。逻辑比较简单,首先需要确定目标位置的坐标、旋转角度、仰角以及OrbitControls的目标位置(为了下一次操作目标位置不正确的问题),然后利用TWEEN,加上动画即可。

// 主要动画代码
TWEEN.tween(start).to(target).onUpdate(()=>{
	camera.position = start
  .....
}).start().onComplete(()=>{
	// 设置orbitcontrols的目标位置
  // 下一次缩放,移动等操作不会出问题
  orbControl.target.set(t.x, t.y, t.z)
})

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表