使用tween创建动画

最新推荐文章于 2024-04-09 11:34:17 发布

碵蝎

最新推荐文章于 2024-04-09 11:34:17 发布

阅读量610

点赞数

分类专栏：旧技术

本文链接：https://blog.csdn.net/QQ408896436/article/details/53869688

版权

旧技术专栏收录该内容

28 篇文章 0 订阅

订阅专栏

three中，你也可以使用TWEEN这个动画插件来创建动画。（关于TWEEN的基础知识，你可以浏览这里：http://blog.csdn.net/qq408896436/article/details/53866240）

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>THREE + TWEEN DEMO</title>
	<style>
		body{ margin: 0; padding: 0; overflow: hidden;  }
	</style>
</head>
<body>
<script src='js/three.js'></script>
<script src='js/Tween.js'></script>
<script>
	var scene = new THREE.Scene();   
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);    
	camera.position.set(0,0,10);  
	camera.lookAt(scene.position);  
	var renderer = new THREE.WebGLRenderer();   
	renderer.setSize(window.innerWidth, window.innerHeight);  
	renderer.setClearColor('#000');   
	document.body.appendChild(renderer.domElement);    
	var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3), new THREE.MeshBasicMaterial({  
	    color : 'green'  
	}));  
	scene.add(cube);  

	//tween 动画 (下面的写法只能改变cube的某个属性，比如只能改变cube的position)
	var tween = new TWEEN.Tween(cube.position)
			.to({x : 3, y : 3, z : 3}, 1000)
			.easing(TWEEN.Easing.Elastic.InOut)
			.onUpdate(function(){
			})
			.repeat(Infinity)
			.yoyo(true)
			.start();

	//tween 动画 (能修改多个属性)
	// var config = {x : 0, y : 0, z : 0, scaleX : 1, rotationX : 0}
	// var tween = new TWEEN.Tween(config)
	// 		.to({x : 3, y : 2, z : 3, scaleX : 4, rotationX : 20}, 1000)
	// 		.easing(TWEEN.Easing.Elastic.InOut)
	// 		.onUpdate(function(){
	// 			cube.position.set( config.x, config.y, config.z );
	// 			cube.scale.x = config.scaleX;
	// 			cube.rotation.x = config.rotationX;
	// 		})
	// 		.repeat(Infinity)
	// 		.yoyo(true)
	// 		.start();


	function updata(){  
	    TWEEN.update();
	    renderer.render(scene, camera);  
	    requestAnimationFrame(updata);  
	}  
	updata();  

</script>
</body>
</html>