使用MorphAnimation实现ThreeJS动画

最新推荐文章于 2024-06-01 15:35:03 发布

iteye_3742

最新推荐文章于 2024-06-01 15:35:03 发布

阅读量394

点赞数

分类专栏： WebGL Html5 ThreeJS 文章标签： webgl three.js

本文链接：https://blog.csdn.net/iteye_3742/article/details/82613140

版权

WebGL 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

ThreeJS

16 篇文章 0 订阅

订阅专栏

Html5

15 篇文章 0 订阅

订阅专栏

效果：

代码：

<!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

iteye_3742

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用MorphAnimation实现ThreeJS动画

效果：代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Horse&lt;/title&gt; &lt;style&gt;body{background:#eee;margin:0;padding:0;
复制链接

扫一扫