解决GLTFLoader加载模型无纹理问题：排查与最佳实践

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

/**
 * 异步加载GLTF模型
 * @returns {Promise<THREE.Scene>} 加载完成的模型场景对象
 */
async function loadModal() {
  const loader = new GLTFLoader();
  try {
    // 使用loadAsync加载GLTF文件
    const gltf = await loader.loadAsync("/low_poly_dog/scene.gltf"); 
    const scene = gltf.scene; // 获取模型的主场景
    scene.scale.setScalar(8.5); // 调整模型大小

    return scene;
  } catch (error) {
    console.error("加载GLTF模型失败:", error);
    throw error; // 向上抛出错误以便进一步处理
  }
}

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three'; // 假设你已经有了Three.js的场景和渲染器设置
// import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; // 确保导入

function MyThreeDComponent(props) {
  const dogRef = useRef(null); // 用于存储模型实例的引用
  const scene = useRef(new THREE.Scene()).current; // 假设你的Three.js场景已初始化

  useEffect(() => {
    loadModal().then((model) => {
      // 如果之前有模型，先移除旧模型
      if (dogRef.current) {
        scene.remove(dogRef.current);
      }
      dogRef.current = model; // 更新模型引用

      // 设置模型位置（假设overlay.latLngAltitudeToVector3是一个转换函数）
      // dogRef.current.position.copy(
      //   overlay.latLngAltitudeToVector3(props.mapOptions.center)
      // );
      // 简化示例，直接设置一个固定位置
      dogRef.current.position.set(0, 0, 0); 

      dogRef.current.rotateY(-Math.PI / 4); // 旋转模型-45度

      // 将模型添加到Three.js场景中
      // overlay.scene.add(dogRef.current); 
      // 简化示例，直接添加到当前组件的场景中
      scene.add(dogRef.current); 

      // 可以在此处触发渲染更新
      // render(); 
    }).catch(error => {
      console.error("处理加载模型结果失败:", error);
    });

    // 清理函数：在组件卸载时移除模型
    return () => {
      if (dogRef.current) {
        scene.remove(dogRef.current);
        dogRef.current.traverse((object) => {
          if (object.isMesh) {
            object.geometry.dispose();
            if (object.material.isMaterial) {
              // 遍历所有材质，释放纹理
              for (const key in object.material) {
                if (object.material[key] && typeof object.material[key].dispose === 'function') {
                  object.material[key].dispose();
                }
              }
              object.material.dispose();
            }
          }
        });
        dogRef.current = null;
      }
    };
  }, [scene /*, props.mapOptions.center, overlay.scene, render */]); // 依赖项

  return (
    <div ref={containerRef} /> // 假设你的渲染器挂载在这个div中
  );
}