在React Three Fiber中为圆柱体不同面设置不同材质的问题

在R3F里不能直接在<mesh>下嵌套多个材质组件，得把材质放进数组，通过mesh的material属性传入，逻辑和原生Three.js一致，只是适配R3F的写法。

修正后的代码示例： #

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { useMemo } from "react";

export default function App() {
  // 用useMemo缓存材质数组，避免重复创建实例
  const materials = useMemo(() => [
    <meshBasicMaterial color={0xff0000} />, // 侧面
    <meshBasicMaterial color={0x00ff00} />, // 顶面
    <meshBasicMaterial color={0x0000ff} />  // 底面
  ], []);

  return (
    <Canvas frameloop="demand" camera={{ position: [75, 1, 0.1], zoom: 20 }}>
      <mesh material={materials}>
        <cylinderGeometry />
      </mesh>
      <OrbitControls />
    </Canvas>
  );
}

关键细节： #

• 圆柱体几何体默认包含3个部分：侧面、顶面、底面，材质数组的元素顺序要和这三个部分对应
• 用useMemo缓存材质数组，防止组件重渲染时重复生成材质实例，优化性能
• 也可以直接创建原生Three.js材质实例组成数组传入，效果完全一致：

const materials = useMemo(() => [
  new THREE.MeshBasicMaterial({ color: 0xff0000 }),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
  new THREE.MeshBasicMaterial({ color: 0x0000ff })
], []);

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