ThreeJS官方案例学习(1)webgl - animation - keyframes

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - animation - keyframes</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">
	</head>

	<body>

		<div id="container"></div>
		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import Stats from 'three/addons/libs/stats.module.js';
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

			let mixer;
			//开启时钟 是否要在第一次调用 .getDelta() 时自动开启时钟。默认值是 true
			const clock = new THREE.Clock();
			//获取页面的元素
			const container = document.getElementById( 'container' );
			//性能检测 FPS帧数
			const stats = new Stats();
			container.appendChild( stats.dom );
			//抗锯齿开启WebGL渲染器
			const renderer = new THREE.WebGLRenderer( { antialias: true } );
			//设置设备像素比。通常用于避免HiDPI设备上绘图模糊
			renderer.setPixelRatio( window.devicePixelRatio );
			//将输出canvas的大小调整为(width, height)并考虑设备像素比
			renderer.setSize( window.innerWidth, window.innerHeight );
			//定义渲染器的输出编码。默认为THREE.LinearEncoding
			renderer.outputEncoding = THREE.sRGBEncoding;
			//添加到页面
			container.appendChild( renderer.domElement );
			//快速创建环境贴图
			const pmremGenerator = new THREE.PMREMGenerator( renderer );
			//创建一个场景
			const scene = new THREE.Scene();
			//生成颜色
			scene.background = new THREE.Color( 0xbfe3dd );
			//该纹理贴图将会被设为场景中所有物理材质的环境贴图,通过模糊贴图快速的加载
			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
			//建立一个透视相机 PerspectiveCamera
			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
			//设置相机的位置标记为x、y和z
			camera.position.set( 0, 2,9 );
			//可以使得相机围绕目标进行轨道运动
			const controls = new OrbitControls( camera, renderer.domElement );
			//控制器的焦点,以这个点为中心旋转。
			controls.target.set( 0, 0.5, 0 );
			//更新控制器。
			controls.update();
			//禁用摄像机平移
			controls.enablePan = false;
			//启用阻尼(惯性),这将给控制器带来重量感
			controls.enableDamping = true;
			//Draco是一个用于压缩和解压缩的开源库。以客户端设备上额外的解码时间为代价,压缩的几何体可以明显更小。
			const dracoLoader = new DRACOLoader();
			dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );
			//用于载入glTF 2.0资源的加载器。
			const loader = new GLTFLoader();
			loader.setDRACOLoader( dracoLoader );
			// gltf有两种形式的文件,一种是后缀为glb的文件,是gltf的二进制形式;一种是后缀为gltf的形式。
			loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {
				//设置场景
				const model = gltf.scene;
				model.position.set( 1, 1, 0 );
				model.scale.set( 0.01, 0.01, 0.01 );
				scene.add( model );
				//建立一个动画混合器
				mixer = new THREE.AnimationMixer( model );
				mixer.clipAction( gltf.animations[ 0 ] ).play();
				//第一次启动动画
				animate();
			}, undefined, function ( e ) {
				console.error( e );
			} );

			//调整窗口大小的事件
			window.onresize = function () {
				//调整相机视锥的长宽比
				camera.aspect = window.innerWidth / window.innerHeight;
				//更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
				camera.updateProjectionMatrix();
				//将输出canvas的大小调整为(width, height)并考虑设备像素比
				renderer.setSize( window.innerWidth, window.innerHeight );
			};

			function animate() {
				//要求浏览器在下次重绘之前调用指定的回调函数更新动画
				requestAnimationFrame( animate );
				//获取自oldTime 设置后到当前的秒数。 同时将oldTime 设置为当前时间。
				const delta = clock.getDelta();
				//推进混合器时间并更新动画
				mixer.update( delta );
				//更新控制器
				controls.update();
				//更新性能检测
				stats.update();
				//使用相机与场景渲染
				renderer.render( scene, camera );
			}
		</script>

	</body>

</html>

你可能感兴趣的:(ThreeJS,学习,webgl)