Three.js+Tween.js实现OrbitControls的动画

最新推荐文章于 2024-08-30 19:45:00 发布

安德烈桔子

最新推荐文章于 2024-08-30 19:45:00 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.csdn.net/GL_user/article/details/88994076

版权

本文介绍如何结合Three.js与Tween.js，通过OrbitControls.js实现更自由的相机动画效果，包括获取和设置相机角度，并通过Tween.js设定动画轨迹，以达到丰富的三维空间视角变换。参考了一位博主的文章并推荐了其优秀实践。

摘要由CSDN通过智能技术生成

在使用Three.JS进行交互展示时，对相机动作的控制都交给了OrbitControls.JS来实现，因为他拥有交互所需的所有基本功能，如旋转相机，缩放等功能，而对特性相机运动效果的操作却并不自由，可控性不高。

为了实现更多种的相机运动效果以模拟人在三维空间中的运动或特殊的视角变换过程，可以使用Tween.js对contrlos进行动画绑定。

该方法参考文章：https://blog.csdn.net/qq_30100043/article/details/84796961

PS：强推这位大佬，做的东西极好！

实现功能：

1.仿照大佬实现controls的水平角度与垂直角度的获取与赋值

2.将获取的数值传入tween中进行动画轨迹设定

实现代码：

1.完全照超大佬的代码，在OrbitControls.js中增加如下方法并保存

	//自增的方法，用于改变controler的水平、垂直角度
	this.setAngle=function (phi,theta,distance) {
		var r = distance || controls.object.position.distanceTo(controls.target);

		var x = r * Math.cos(phi - Math.PI / 2) * Math.sin(theta) + controls.target.x;
		var y = r * Math.sin(phi + Math.PI / 2) + con

最低0.47元/天解锁文章