01.three官方示例+编辑器+AI快速学习webgl_animation_keyframes

// 导入Three.js核心库 import * as THREE from 'three'; // 导入性能统计工具Stats import Stats from 'three/addons/libs/stats.module.js'; // 导入轨道控制器OrbitControls，用于控制相机视角 import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 导入房间环境对象RoomEnvironment，用于创建场景环境 import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; // 导入GLTF模型加载器GLTFLoader import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // 导入Draco压缩模型加载器DRACOLoader import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; // 声明动画混合器变量 let mixer; // 创建时钟对象，用于计算动画时间间隔 const clock = new THREE.Clock(); // 获取放置渲染结果的容器元素 const container = document.getElementById('container'); // 创建性能统计对象 const stats = new Stats(); // 将性能统计的DOM元素添加到容器中 container.appendChild(stats.dom); // 创建WebGL渲染器，开启抗锯齿 const renderer = new THREE.WebGLRenderer({ antialias: true }); // 设置渲染器的像素比为设备像素比 renderer.setPixelRatio(window.devicePixelRatio); // 设置渲染器的尺寸为窗口的内部宽度和高度 renderer.setSize(window.innerWidth, window.innerHeight); // 将渲染器的DOM元素添加到容器中 container.appendChild(renderer.domElement); // 创建PMREM生成器，用于生成预过滤辐射环境贴图 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; // 创建透视相机 const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100); // 设置相机位置 camera.position.set(5, 2, 8); // 创建轨道控制器，关联相机和渲染器的DOM元素 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(); // 设置Draco解码器的路径 dracoLoader.setDecoderPath('jsm/libs/draco/gltf/'); // 创建GLTF加载器 const loader = new GLTFLoader(); // 为GLTF加载器设置Draco加载器，用于加载压缩的GLTF模型 loader.setDRACOLoader(dracoLoader); // 加载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(); // 设置渲染器的动画循环函数 renderer.setAnimationLoop(animate); }, undefined, function (e) { // 加载过程中出现错误时，在控制台打印错误信息 console.error(e); }); // 窗口大小改变时的回调函数 window.onresize = function () { // 更新相机的纵横比 camera.aspect = window.innerWidth / window.innerHeight; // 更新相机的投影矩阵 camera.updateProjectionMatrix(); // 更新渲染器的尺寸 renderer.setSize(window.innerWidth, window.innerHeight); }; // 动画循环函数 function animate() { // 获取时钟的时间间隔 const delta = clock.getDelta(); // 更新动画混合器，推进动画 mixer.update(delta); // 更新轨道控制器，处理相机的交互 controls.update(); // 更新性能统计信息 stats.update(); // 使用渲染器渲染场景和相机 renderer.render(scene, camera); }