将本地glTF文件加载到Javascript内存

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

<div id="canvas"></div>

// 获取用于显示的HTML元素
const canvas = document.getElementById('canvas');

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 设置渲染器的大小和HTML元素的大小一致
renderer.setSize(canvas.clientWidth, canvas.clientHeight);

// 将渲染器的输出添加到HTML元素中
canvas.appendChild(renderer.domElement);

// 创建一个glTF加载器
const loader = new THREE.GLTFLoader();

// 加载glTF文件
loader.load(
  'path/to/your/model.glb', // glTF文件路径
  (gltf) => {
    // 加载完成后的回调函数

    // 获取加载的模型
    const model = gltf.scene;

    // 设置模型的位置和缩放
    model.position.set(0, 0, 0);
    model.scale.set(1, 1, 1);

    // 将模型添加到场景中
    scene.add(model);
  },
  (xhr) => {
    // 加载过程中的回调函数
    console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
  },
  (error) => {
    // 加载错误时的回调函数
    console.error('An error happened', error);
  }
);

// 设置相机的位置
camera.position.z = 5;

// 创建动画循环
function animate() {
  requestAnimationFrame(animate);

  // 每帧渲染场景和相机
  renderer.render(scene, camera);
}

// 启动动画循环
animate();