使用three.js导入Blender导出的3D模型失败该如何解决？

问题排查与修复方案 #

• 修复GLTFLoader导入路径
  你当前使用的GLTFLoader导入路径为无效占位路径，且需保证加载器版本与three.js核心版本完全匹配，调整导入逻辑即可。
• 调整渲染逻辑
  GLTF模型加载为异步操作，你当前的渲染代码在模型加载完成前就已经执行，导致场景渲染时还没有模型内容。可以将渲染逻辑放到加载完成的回调中，或者添加动画循环持续渲染场景。
• 补充相机位置配置
  默认透视相机会和模型同处于三维坐标原点，会导致相机位于模型内部无法观察到模型，需要手动设置相机的位置参数。
• 校验Blender导出配置
  从Blender导出glb/glTF格式文件时，需要勾选「导出几何体」「导出材质」相关选项，同时提前调整模型尺寸，避免模型尺寸过大/过小超出相机视锥体的显示范围。

修正后的参考代码：

import * as THREE from "https://cdn.skypack.dev/three@0.131.3";
// 匹配版本导入GLTFLoader
import { GLTFLoader } from "https://cdn.skypack.dev/three@0.131.3/examples/jsm/loaders/GLTFLoader.js";

const scene = new THREE.Scene();
// 添加环境光避免模型材质无法显示
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 设置相机位置，可根据模型尺寸调整参数
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new GLTFLoader();

loader.load(
  "path/object.glb", // 替换为你的模型实际路径
  function (gltf) {
    scene.add(gltf.scene);
    // 模型加载完成后执行渲染
    renderer.render(scene, camera);
  },
  undefined,
  function (error) {
    console.error(error);
  }
);
// 也可以用动画循环替代单次渲染，方便后续场景交互
// function animate() {
//   requestAnimationFrame(animate);
//   renderer.render(scene, camera);
// }
// animate();

内容的提问来源于stack exchange，提问作者Mark t