基于 Three.js 的 3D 模型加载优化

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 
// 创建场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 使用DRACOLoader优化GLTF模型加载
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('path/to/draco/gltf/decoder/');
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.load('path/to/model.gltf', function (gltf) {
  scene.add(gltf.scene);
  animate();
});
 
// 动画渲染函数
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
 
animate(); // 开始渲染动画

这段代码展示了如何使用Three.js加载一个优化过的3D模型，并进行动态渲染。首先，我们引入了必要的Three.js库和加载器。然后，我们创建了场景、摄像机和渲染器，并设置了渲染器的大小和位置。接下来，我们使用DRACOLoader优化了模型的加载，并在加载完成后将模型添加到场景中，并开始渲染动画。这个例子简洁地展示了如何优化3D模型加载，并提高Web应用程序的性能。