使用Animation实现ThreeJS动画-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3742/article/details/82613272

本文详细介绍了如何使用three.js库实现三维模型的交互功能，包括模型加载、相机定位、旋转控件添加及动画播放。通过四个关键步骤，实现从静态展示到动态交互的转变，适用于游戏开发、虚拟现实、教育等多个领域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：

画地面，并让地面旋转，以便观察

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Knight</title>
		<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
		<script src="js/three.min.js"></script>
	</head>
	<body>
		<script>
			var width = window.innerWidth;
			var height = window.innerHeight;
			
			var scene = new THREE.Scene();
			
			var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
			//camera.position.z = 1000;
			camera.position.set(0, 0, 1000);
			//camera.up.z = 1;
			camera.lookAt({x:0,y:0,z:0});
			//scene.add(camera);
			
			var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1);	//Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
			var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb});	//MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
			
			var ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 1, 1), new THREE.MeshBasicMaterial({color:0xbbbbbb,side:THREE.DoubleSide}));
			//var ground = new THREE.Mesh(geometry, material);
			ground.position.set(0, 0, 0);
			//ground.rotation.x = -Math.PI/2;
			this.scene.add(ground);
			
			var ambientLight = new THREE.AmbientLight(0x222222);
			scene.add(ambientLight);
			
			var drLight = new THREE.DirectionalLight(0xeeeeee);
			drLight.position.set(100, 100, 100);
			scene.add(drLight);
			
			var renderer = new THREE.WebGLRenderer({antialias:true});
			renderer.setSize(width, height);
			renderer.setClearColor(0xffffff, 1.0);
			document.body.appendChild(renderer.domElement);
			
			var delta = 0;
			function render(){
				delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
				//camera.lookAt({x:0,y:0,z:0});
				ground.rotation.x = delta;
				renderer.render(scene, camera);
				
				requestAnimationFrame(render);
			}
			render();
		</script>
	</body>
</html>

第二步：

加载模型

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Knight</title>
		<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
		<script src="js/three.min.js"></script>
	</head>
	<body>
		<script>
		var scene,camera,renderer;
		var mesh,ground;
		var width = window.innerWidth;
		var height = window.innerHeight;
		
		function init(){
			scene = new THREE.Scene();
			
			camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
			camera.position.set(0, 0, 1000);
			camera.lookAt({x:0, y:0, z:0});
			scene.add(camera);
			
			var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1);	//Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
			var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb});	//MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
			//var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
			
			ground = new THREE.Mesh(geometry, material);
			ground.position.set(0, 0, 0);
			ground.rotation.x = -Math.PI/2;
			scene.add(ground);
			
			var loader = new THREE.JSONLoader();
			loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
				var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );	//蒙皮网格模型
				mesh.position.set( 0, 0, 0 );
				mesh.scale.set( 30, 30, 30 );
				scene.add( mesh );
			});
			
			var ambientLight = new THREE.AmbientLight(0x222222);
			scene.add(ambientLight);
			
			var drLight = new THREE.DirectionalLight(0xeeeeee);
			drLight.position.set(100, 100, 100);
			scene.add(drLight);
			
			renderer = new THREE.WebGLRenderer({antialias:true});
			renderer.setSize(width, height);
			renderer.setClearColor(0xffffff, 1.0);
			document.body.appendChild(renderer.domElement);
		}
		var delta = 0;
		function animate(){
			requestAnimationFrame(animate);
			
			delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
			ground.rotation.x = delta;
			renderer.render(scene, camera);
		}
		
		init();
		animate();
		</script>
	</body>
</html>

第三步：

重新设定相机位置，并添加旋转控件，以便从各个方位观察模型

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>MyKnight</title>
		<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
		<script src="js/three.min.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
	</head>
	<body>
		<script>
		var scene,camera,renderer;
		var mesh,ground;
		var controls;
		var width = window.innerWidth;
		var height = window.innerHeight;
		
		function init(){
			scene = new THREE.Scene();
			
			camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
			camera.position.set(-500, 500, 800);
			camera.lookAt({x:0, y:0, z:0});
			scene.add(camera);
			
			var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1);	//Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
			//var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb});	//MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
			var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
			
			ground = new THREE.Mesh(geometry, material);
			ground.position.set(0, 0, 0);
			ground.rotation.x = -Math.PI/2;
			ground.receiveShadow = true;
			scene.add(ground);
			
			var loader = new THREE.JSONLoader();
			loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
				var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );	//蒙皮网格模型
				mesh.position.set( 0, 0, 0 );
				mesh.scale.set( 30, 30, 30 );
				mesh.castShadow = true;
				scene.add( mesh );
			});
			
			var ambientLight = new THREE.AmbientLight(0x222222);
			scene.add(ambientLight);
			
			var drLight = new THREE.DirectionalLight(0xeeeeee);
			drLight.position.set(500, 500, 500);
			drLight.castShadow = true;
			scene.add(drLight);
			
			renderer = new THREE.WebGLRenderer({antialias:true});
			renderer.setSize(width, height);
			renderer.setClearColor(0xffffff, 1.0);
			renderer.shadowMapEnabled = true;
			document.body.appendChild(renderer.domElement);
			
			controls = new THREE.TrackballControls(camera);
			controls.staticMoving = true;
		}
		//var delta = 0;
		
		function animate(){
			requestAnimationFrame(animate);
			
			controls.update();
			//delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
			//camera.rotation.y = delta;
			//camera.lookAt(scene.position);
			renderer.render(scene, camera);
		}
		
		init();
		animate();
		</script>
	</body>
</html>

第四步：

使用Animation播放动画模型，并使用THREE.Clock()做计时器

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>MyKnight</title>
		<style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
		<script src="js/three.min.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
	</head>
	<body>
		<script>
		var scene,camera,renderer;
		var mesh,ground;
		var controls;
		var width = window.innerWidth;
		var height = window.innerHeight;
		
		function init(){
			scene = new THREE.Scene();
			
			camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
			camera.position.set(-500, 500, 800);
			camera.lookAt({x:0, y:0, z:0});
			scene.add(camera);
			
			var geometry = new THREE.PlaneBufferGeometry(1000, 1000, 1, 1);	//Palne是在x/y轴上绘制的（所有不用旋转90度即可看到）
			//var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb});	//MeshPhongMaterial冯氏材质，即类玻璃的镜面材质；emissive:0xbbbbbb，即反射#bbbbbb颜色的光
			var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
			
			var loader = new THREE.JSONLoader();
			loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
				
				for ( var i = 0; i < materials.length; i ++ ) {
					var m = materials[ i ];
					m.skinning = true;		//蒙皮
					m.morphTargets = true;	//变形目标
				}
			
				mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );	//蒙皮网格模型
				//mesh.position.set( 0, 0, 100 );
				mesh.scale.set( 30, 30, 30 );
				mesh.castShadow = true;
				scene.add( mesh );
				
				var animation = new THREE.Animation( mesh, geometry.animation );
				animation.play();
			});
			
			ground = new THREE.Mesh(geometry, material);
			ground.position.set(0, 0, 0);
			ground.rotation.x = -Math.PI/2;
			ground.receiveShadow = true;
			scene.add(ground);
			
			var drLight = new THREE.DirectionalLight(0xeeeeee);
			drLight.position.set(500, 500, 500);
			drLight.castShadow = true;
			scene.add(drLight);
			
			renderer = new THREE.WebGLRenderer({antialias:true});
			renderer.setSize(width, height);
			renderer.setClearColor(0xffffff, 1.0);
			renderer.shadowMapEnabled = true;

			document.body.appendChild(renderer.domElement);
			
			controls = new THREE.TrackballControls(camera);
			controls.staticMoving = true;
		}
		
		var clock = new THREE.Clock();
		function animate(){
			requestAnimationFrame(animate);
			
			controls.update();
			
			THREE.AnimationHandler.update( 0.75*clock.getDelta() );		//控制动画速度（AnimationHandler类的update: function ( deltaTimeMS ) {...}方法，参数以ms为单位）

			renderer.render(scene, camera);
		}
		
		init();
		animate();
		</script>
	</body>
</html>

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