<!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官方案例学习(1)webgl - animation - keyframes
猜你喜欢
转载自blog.csdn.net/ren365880/article/details/129759316
今日推荐
周排行