react-three-fiber中useTexture加载图片后纹理不显示问题求助

• 属性名不匹配问题：你通过useTexture传入的自定义键名texture_1~texture_6，和meshStandardMaterial支持的纹理属性完全不兼容。单个meshStandardMaterial仅识别map、aoMap、metalnessMap等官方定义的纹理属性，不存在你自定义的texture_x类属性，所以纹理没有被正确绑定到材质上。
• 多面纹理用法错误：如果要给立方体六个面设置不同/相同纹理，不能直接把纹理属性解构到单个材质上，需要给mesh的material属性传入长度为6的材质数组，每个材质对应立方体的一个面。
• 光照影响排查：meshStandardMaterial是PBR材质，受场景光照影响，你可以临时替换为不受光照影响的meshBasicMaterial测试，如果替换后纹理正常显示，说明是场景光照强度不足，可以把ambientLight的intensity调整为1~2再测试。
• 纹理资源校验：确认加载的图片尺寸符合WebGL规范，优先使用2的幂次尺寸（如512512、10241024），非2的幂次图片虽然ThreeJS会自动适配，但部分场景下会出现加载后不渲染的问题；也可以在组件内打印useTexture的返回值，确认返回的是正常的THREE.Texture实例，加载状态为完成。

单纹理（所有面共用同一张图） #

import './App.css';
import { useRef, Suspense} from 'react';
import {Canvas, useFrame} from '@react-three/fiber';
import { useTexture } from '@react-three/drei';
import img1 from './image/20211008_203906.jpg';

function Box(){
  // 单纹理直接传入图片，返回值直接绑定到材质的map属性即可
  const texture = useTexture(img1);
  const mesh=useRef();
  useFrame(()=>{
    mesh.current.rotation.x+=0.01;
    mesh.current.rotation.y+=0.01;
    mesh.current.rotation.z+=0.01;
  });

  return (<mesh ref={mesh}>
    <boxBufferGeometry attach="geometry" args={[2,2,2]}/>
    <meshStandardMaterial map={texture} />
  </mesh>);
}

function App() {
  return (
    <div className="App">
     <Canvas>
      <ambientLight intensity={1} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      <Suspense fallback={null}>
        <Box />
      </Suspense>
    </Canvas>
    </div>
  );
}

export default App;

多面自定义纹理 #

function Box(){
  // 按立方体面顺序传入6张纹理图，返回纹理数组
  const textures = useTexture([img1, img1, img1, img1, img1, img1]);
  // 生成6个材质实例，对应每个面的纹理
  const materialArr = textures.map(texture => <meshStandardMaterial map={texture} />);
  const mesh=useRef();
  useFrame(()=>{
    mesh.current.rotation.x+=0.01;
    mesh.current.rotation.y+=0.01;
    mesh.current.rotation.z+=0.01;
  });
  // 把材质数组传给mesh的material属性
  return (<mesh ref={mesh} material={materialArr}>
    <boxBufferGeometry attach="geometry" args={[2,2,2]}/>
  </mesh>);
}

内容的提问来源于stack exchange，提问作者aminul islam