解决GLTF模型加载无纹理问题：Three.js与React应用实践

import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 用于场景交互

// 辅助函数：异步加载GLTF模型
async function loadGLTFModel(modelPath) {
  const loader = new GLTFLoader();
  try {
    const gltf = await loader.loadAsync(modelPath);
    const scene = gltf.scene;

    // 遍历模型，检查每个网格的材质是否包含纹理
    scene.traverse((node) => {
      if (node.isMesh && node.material) {
        console.log(`检查网格: ${node.name || node.uuid} 的材质: ${node.material.name || node.material.uuid}`);
        if (node.material.map) {
          console.log("  - 发现漫反射纹理 (map):", node.material.map);
        } else {
          console.warn("  - 未发现漫反射纹理 (map)!");
        }
        // 可以进一步检查其他纹理类型，如法线贴图 (normalMap), 环境光遮蔽贴图 (aoMap) 等
      }
    });

    return scene;
  } catch (error) {
    console.error("加载GLTF模型时发生错误:", error);
    throw error; // 抛出错误以便上层组件处理
  }
}

function GLTFViewer({ modelUrl }) {
  const mountRef = useRef(null);
  const sceneRef = useRef(new THREE.Scene());
  const cameraRef = useRef(new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000));
  const rendererRef = useRef(new THREE.WebGLRenderer({ antialias: true }));
  const controlsRef = useRef(null);
  const currentModelRef = useRef(null); // 用于保存当前加载的模型

  useEffect(() => {
    const currentMount = mountRef.current;
    const scene = sceneRef.current;
    const camera = cameraRef.current;
    const renderer = rendererRef.current;

    // 初始化渲染器
    renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
    currentMount.appendChild(renderer.domElement);

    // 设置相机位置
    camera.position.set(0, 5, 10);
    camera.lookAt(0, 0, 0);

    // 添加环境光和方向光
    scene.add(new THREE.AmbientLight(0x404040)); // 柔和的白光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 10, 7.5).normalize();
    scene.add(directionalLight);

    // 初始化轨道控制器
    controlsRef.current = new OrbitControls(camera, renderer.domElement);
    controlsRef.current.enableDamping = true; // 启用阻尼（惯性）
    controlsRef.current.dampingFactor = 0.25;
    controlsRef.current.screenSpacePanning = false;
    controlsRef.current.maxPolarAngle = Math.PI / 2;

    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate);
      controlsRef.current.update(); // 仅在启用阻尼时需要
      renderer.render(scene, camera);
    };
    animate();

    // 窗口大小调整事件
    const handleResize = () => {
      camera.aspect = currentMount.clientWidth / currentMount.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
    };
    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
      window.removeEventListener('resize', handleResize);
      if (currentMount && renderer.domElement) {
        currentMount.removeChild(renderer.domElement);
      }
      // 清理场景中的所有对象，防止内存泄漏
      scene.traverse((object) => {
        if (object.isMesh) {
          object.geometry.dispose();
          if (Array.isArray(object.material)) {
            object.material.forEach(material => material.dispose());
          } else {
            object.material.dispose();
          }
        }
      });
      renderer.dispose();
      controlsRef.current.dispose();
    };
  }, []); // 仅在组件挂载时执行一次初始化

  // 监听 modelUrl 变化，加载新模型
  useEffect(() => {
    const scene = sceneRef.current;

    loadGLTFModel(modelUrl).then((model) => {
      // 移除旧模型
      if (currentModelRef.current) {
        scene.remove(currentModelRef.current);
        // 如果旧模型有几何体和材质，也需要 dispose 以释放内存
        currentModelRef.current.traverse((object) => {
          if (object.isMesh) {
            object.geometry.dispose();
            if (Array.isArray(object.material)) {
              object.material.forEach(material => material.dispose());
            } else if (object.material) {
              object.material.dispose();
            }
          }
        });
      }

      // 添加新模型
      model.scale.setScalar(8.5); // 示例：调整模型大小
      // model.position.set(0, 0, 0); // 示例：设置模型位置
      scene.add(model);
      currentModelRef.current = model; // 保存当前模型引用
    }).catch(error => {
      console.error("无法加载或添加到场景:", error);
    });
  }, [modelUrl]); // 依赖于 modelUrl，当它改变时重新加载

  return <div ref={mountRef} style={{ width: '100%', height: '500px', background: '#f0f0f0' }} />;
}

export default GLTFViewer;

// 在你的应用中使用:
// <GLTFViewer modelUrl="/low_poly_dog/scene.gltf" />