master

Branches (1)

Manage

Manage

master

threejs-example
/
robotannimate.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl </title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #fff;
				color: #444;
			}
			a {
				color: #08f;
			}
		</style>
	</head>

	<body>
		<div id="info">
			<p style="color: #000;font-size:20px;font-family:黑体">按c键 机器人跳
			</p>
			<p style="color: #000;font-size:20px;font-family:黑体">
			按v键 机器人跳舞
			</p>
			<p style="color: #000;font-size:20px;font-family:黑体">
			按b键 机器人举手
			</p>
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';
			import Stats from './jsm/libs/stats.module.js';
			import { TDSLoader } from './jsm/loaders/TDSLoader.js';
			import { TrackballControls } from './jsm/controls/TrackballControls.js';
			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
			import { FlyControls } from './jsm/controls/FlyControls.js';
			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';


			let camera, scene, renderer;
			let model,mixer, actions,animations;
			let previousAction,activeAction;

			const clock = new THREE.Clock();

			const controls = {

				jump:false,
				dance:false,
				thumbUp:false,

			};
			init();
			animate();

			function init() {

				//初始化
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xbfd1e5 );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.shadowMap.enabled = true;
				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );


				window.addEventListener( 'resize', onWindowResize, false );
				document.addEventListener( 'keydown', onKeyDown, false );
				document.addEventListener( 'keyup', onKeyUp, false );


				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
				scene.add( ambientLight );

				//设置灯光
				let directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
				directionalLight.position.set( 200, 450, -500 );
				scene.add( directionalLight );

				const loader = new GLTFLoader();
				loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function ( gltf ) {

					model = gltf.scene;
					animations = gltf.animations;
					createAnimate(animations);

					scene.add( model );

				}, undefined, function ( e ) {

					console.error( e );

				} );


				//加载地面
				const gt = new THREE.TextureLoader().load( "models/textures/terrain/grasslight-big.jpg" );
				const gg = new THREE.PlaneBufferGeometry( 1000, 1000 );
				const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );

				const ground = new THREE.Mesh( gg, gm );
				ground.rotation.x = - Math.PI / 2;
				ground.position.y = 0;
				ground.material.map.repeat.set( 64, 64 );
				ground.material.map.wrapS = THREE.RepeatWrapping;
				ground.material.map.wrapT = THREE.RepeatWrapping;
				ground.material.map.encoding = THREE.sRGBEncoding;
				// note that because the ground does not cast a shadow, .castShadow is left false
				ground.receiveShadow = true;
				scene.add(ground);


				//设置相机
				camera.position.set(0,10,25);

				camera.lookAt(new THREE.Vector3(0,5,0));

			}
			function createAnimate(animations)
			{
				mixer = new THREE.AnimationMixer( model );

				actions = {};

				for ( let i = 0; i < animations.length; i ++ ) {

					const clip = animations[ i ];
					const action = mixer.clipAction( clip );
					actions[ clip.name ] = action;

				}
				activeAction = null;

			}
			function fadeToAction( name, duration ) {

				previousAction = activeAction;
				activeAction = actions[ name ];
				if(previousAction != null)
				{
					if ( previousAction !== activeAction ) {

						previousAction.fadeOut( duration );

					}

					activeAction
						.reset()
						.setEffectiveTimeScale( 1 )
						.setEffectiveWeight( 1 )
						.fadeIn( duration )
						.play();
					}

			}
			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
			function onKeyDown( event ) {

				switch ( event.keyCode ) {

					case 67: /*C*/   controls.jump = true;break;
					case 86: /*v*/   controls.dance = true;break;
					case 66: /*b*/   controls.thumbUp = true;break;
				}

			}

			function onKeyUp( event ) {

				switch ( event.keyCode ) {

					case 67: /*C*/     controls.jump = false;break;
					case 86: /*v*/   controls.dance = false;break;
					case 66: /*b*/   controls.thumbUp = false;break;

				}

			}

			function animate() {

				requestAnimationFrame( animate );

				if ( mixer ) mixer.update( clock.getDelta() );
				renderer.render( scene, camera );
				//animation control
				if(controls.jump)
					fadeToAction('Jump',0.5);

				if(controls.dance)
					fadeToAction('Dance',0.5);

				if(controls.thumbUp)
					fadeToAction('ThumbsUp',0.5);

			}

		</script>

	</body>
</html>