`
18211103738
  • 浏览: 83288 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

使用MorphAnimation实现ThreeJS动画

阅读更多

效果:

 
 

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Horse</title>
		<style>body{background:#eee;margin:0;padding:0;overflow:hidden;}</style>
		<script src="js/three.min.js"></script>
	</head>
	<body>
		<script>
		var scene,camera,renderer;
		var mesh,animation;
		
		var width = window.innerWidth;
		var height = window.innerHeight;
		
		function init(){
			scene = new THREE.Scene();
			
			camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
			camera.position.set(0, 0, 500);
			scene.add(camera);
				
			var loader = new THREE.JSONLoader(true);	//JSONLoader构造传入true,即showStatus=ture(显示加载进度)
			loader.load("models/animated/horse.js",function(geometry){
				mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color:0x606060,morphTargets:true}));
				mesh.position.y = -100;
				mesh.rotation.y = Math.PI/2;
				//mesh.scale.set(1.5, 1.5, 1.5);	//设置x,y,z的缩放比例
				scene.add(mesh);
				
				animation = new THREE.MorphAnimation(mesh);		//MorphAnimation是Mesh的封装,其update方法是对mesh.morphTargetInfluences的自动化处理(mesh.morphTargetInfluences和geometry.morphTargets对应)
				animation.play();		//播放动画
				//animation.pause();	//暂停动画
			});
			
			var light = new THREE.AmbientLight(0x606060, 0.5);
			scene.add(light);
			
			var drLight = new THREE.DirectionalLight(0xffffff);
			drLight.position.set(500, 500, 500);
			scene.add(drLight);
			
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height);
			renderer.setClearColor(0xeeeeee, 1.0);
			document.body.appendChild(renderer.domElement);
		}
		
		var delta = null;	//变量增量
		var clock = new THREE.Clock();	//创建一个时针/秒表
		function animate(){
			requestAnimationFrame(animate);
			
			if(mesh){
				mesh.rotation.y -= Math.PI/360;
			}
			
			delta = clock.getDelta();		//得到距离上一次调用render()过去的时间(以秒为单位)
			console.log(delta);
			if ( animation ) {
				animation.update(1000*delta);	//因为MorphAnimation类中this.duration=1000,即动画默认持续时间是1000毫秒,而delta是以秒为单位,所以乘以1000
			}
			
			renderer.render(scene, camera);
		}
		
		init();
		animate();
		</script>
	</body>
</html>

 附注:当前笔者使用的three.js版本是r69

  • 大小: 32.5 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics