如何在react-three-fiber中向mesh传入纹理数组实现六面虚拟漫游

核心问题点 #

之前的代码存在几个核心问题导致效果和原生Three.js不一致：

• 仅在JSX中渲染了单个meshBasicMaterial组件，没有将构造好的6面材质数组传入mesh，默认只会给所有面应用同一个材质
• 立方体尺寸和原生版本不匹配，原生使用100100100的立方体尺寸，当前设置的是111
• 材质数组在组件每次渲染时都会重复创建，没有做缓存会导致不必要的性能开销

可直接运行的正确实现 #

首先确保你已经正确导入依赖：

import { useMemo } from 'react'
import { useLoader } from '@react-three/fiber'
import { TextureLoader, MeshBasicMaterial, BackSide } from 'three'

组件实现代码完全对齐原生Three.js逻辑：

function RoomSpace() {
  // 批量加载6个面的纹理，useLoader会自动处理纹理缓存和加载状态
  const [
    frontTexture,
    backTexture,
    topTexture,
    bottomTexture,
    leftTexture,
    rightTexture
  ] = useLoader(TextureLoader, [
    front_texture,
    back_texture,
    top_texture,
    bottom_texture,
    left_texture,
    right_texture
  ])

  // 缓存材质数组，仅在纹理加载完成后初始化一次，避免重复创建材质实例
  const faceMaterials = useMemo(() => {
    const materials = [
      new MeshBasicMaterial({ map: frontTexture }),
      new MeshBasicMaterial({ map: backTexture }),
      new MeshBasicMaterial({ map: topTexture }),
      new MeshBasicMaterial({ map: bottomTexture }),
      new MeshBasicMaterial({ map: leftTexture }),
      new MeshBasicMaterial({ map: rightTexture })
    ]
    // 所有面设置为背面渲染，和原生逻辑一致
    materials.forEach(mat => mat.side = BackSide)
    return materials
  }, [frontTexture, backTexture, topTexture, bottomTexture, leftTexture, rightTexture])

  return (
    {/* 直接给mesh的material属性传入材质数组，和原生new Mesh(geometry, materials)逻辑完全一致 */}
    <mesh material={faceMaterials}>
      <boxGeometry args={[100, 100, 100]} />
    </mesh>
  )
}

简化写法（无需手动创建材质实例） #

R3F支持直接在mesh下按顺序写多个材质组件，会自动收集为材质数组应用到几何体对应面，不需要手动实例化材质：

function RoomSpace() {
  const [
    frontTexture,
    backTexture,
    topTexture,
    bottomTexture,
    leftTexture,
    rightTexture
  ] = useLoader(TextureLoader, [
    front_texture,
    back_texture,
    top_texture,
    bottom_texture,
    left_texture,
    right_texture
  ])

  return (
    <mesh>
      <boxGeometry args={[100, 100, 100]} />
      <meshBasicMaterial map={frontTexture} side={BackSide} />
      <meshBasicMaterial map={backTexture} side={BackSide} />
      <meshBasicMaterial map={topTexture} side={BackSide} />
      <meshBasicMaterial map={bottomTexture} side={BackSide} />
      <meshBasicMaterial map={leftTexture} side={BackSide} />
      <meshBasicMaterial map={rightTexture} side={BackSide} />
    </mesh>
  )
}

注意：BoxGeometry的面有固定的材质映射顺序，如果运行后发现纹理位置错位，调整6个meshBasicMaterial的排列顺序即可匹配正确的面。

drei简化方案 #

如果项目中已经引入@react-three/drei，可以直接使用内置的立方体环境组件，不需要手动构造几何体和材质，传入六面纹理即可快速实现漫游空间。

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