如何在R3F中合并几何体并为每个几何体保留独立颜色

嘿，刚好之前折腾过类似的需求——在React Three Fiber（R3F）里合并多个几何体，还得让每个原几何体保留自己的独立颜色。其实核心逻辑就是把各个几何体的顶点数据合并到一起，同时给每个顶点绑定好对应几何体的颜色值，这样合并后的单个几何体就能渲染出不同部分的专属颜色啦。

比如你提到的3个多边形合并的场景，咱们可以这么来实现：

• 第一步：给每个要合并的几何体单独设置颜色，并且把颜色信息添加到几何体的顶点属性里。毕竟Three.js是通过顶点颜色来区分不同区域颜色的，所以每个几何体的每一个顶点都要带上对应的颜色值。
• 第二步：用Three.js的BufferGeometryUtils.mergeGeometries工具把这些带颜色属性的几何体合并成一个新的BufferGeometry。
• 第三步：使用支持顶点颜色的材质（比如MeshStandardMaterial或者MeshBasicMaterial），开启vertexColors: true选项，这样合并后的网格就能正确渲染出每个原几何体的颜色了。

给你贴个实际可运行的R3F代码例子，一看就懂：

import { useRef, useEffect } from 'react';
import { useThree } from '@react-three/fiber';
import * as THREE from 'three';
import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';

export default function MergedColoredShapes() {
  const meshRef = useRef();
  const { scene } = useThree();

  useEffect(() => {
    // 准备三个带专属颜色的几何体
    // 红色立方体
    const cubeGeo = new THREE.BoxGeometry(1, 1, 1);
    const red = new THREE.Color('#ff3333');
    // 给立方体的每个顶点添加红色属性
    cubeGeo.setAttribute(
      'color',
      new THREE.Float32BufferAttribute(
        Array(cubeGeo.attributes.position.count).fill().map(() => [...red.toArray()]).flat(),
        3
      )
    );

    // 绿色球体（偏移位置避免重叠）
    const sphereGeo = new THREE.SphereGeometry(0.6, 16, 16);
    sphereGeo.translate(2, 0, 0);
    const green = new THREE.Color('#33ff33');
    sphereGeo.setAttribute(
      'color',
      new THREE.Float32BufferAttribute(
        Array(sphereGeo.attributes.position.count).fill().map(() => [...green.toArray()]).flat(),
        3
      )
    );

    // 蓝色圆柱体（偏移位置）
    const cylinderGeo = new THREE.CylinderGeometry(0.5, 0.5, 1, 16);
    cylinderGeo.translate(-2, 0, 0);
    const blue = new THREE.Color('#3333ff');
    cylinderGeo.setAttribute(
      'color',
      new THREE.Float32BufferAttribute(
        Array(cylinderGeo.attributes.position.count).fill().map(() => [...blue.toArray()]).flat(),
        3
      )
    );

    // 合并所有几何体
    const mergedGeometry = BufferGeometryUtils.mergeGeometries([cubeGeo, sphereGeo, cylinderGeo]);
    // 标记颜色属性需要更新，确保Three.js识别
    mergedGeometry.attributes.color.needsUpdate = true;

    // 创建支持顶点颜色的材质
    const coloredMaterial = new THREE.MeshStandardMaterial({
      vertexColors: true,
      roughness: 0.6,
      metalness: 0.1
    });

    // 创建合并后的网格并添加到场景
    const mergedMesh = new THREE.Mesh(mergedGeometry, coloredMaterial);
    meshRef.current = mergedMesh;
    scene.add(mergedMesh);

    // 组件卸载时清理资源
    return () => {
      scene.remove(mergedMesh);
      mergedGeometry.dispose();
      coloredMaterial.dispose();
      cubeGeo.dispose();
      sphereGeo.dispose();
      cylinderGeo.dispose();
    };
  }, [scene]);

  return null;
}

简单解释下这个例子：我们给三个基础几何体分别设置了红、绿、蓝三种颜色，并且给每个几何体的所有顶点都绑定了对应颜色的属性。合并之后，用开启了vertexColors: true的材质渲染，就能看到三个几何体各自保持原来的颜色，同时它们已经是一个合并后的单个网格了，性能上也更优。

备注：内容来源于stack exchange，提问作者TheKalashnikov