如何修改R3F Decal网格形状实现图片按指定形状裁剪（三角形为例）

要让Decal显示为三角形并裁剪图片，核心是替换Decal默认的平面几何体为自定义三角形几何体，同时正确设置UV坐标和材质属性，具体步骤如下：

1. 创建自定义三角形几何体 #

Decal组件默认使用PlaneGeometry（矩形），你需要手动创建三角形的BufferGeometry，并定义正确的顶点和UV坐标，确保图片能正确映射到三角形上。

2. 修改组件代码 #

在你的组件中添加自定义几何体，并传递给Decal组件，同时调整材质参数保证裁剪生效：

import { useState, useRef, useMemo } from 'react';
import { Decal } from '@react-three/drei';
import * as THREE from 'three';

const Image = ({ position, image, scale, setIsHoveredG }) => {
    const [imageTexture] = useState(() => {
        const texture = new THREE.TextureLoader().load(image);
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.x = -1;
        texture.offset.x = 1;
        return texture;
    }); // 左右翻转图片

    const ref = useRef();
    const [isHovered, setIsHovered] = useState(false);

    // 创建三角形几何体（用useMemo缓存，避免重复创建）
    const triangleGeometry = useMemo(() => {
        const geometry = new THREE.BufferGeometry();
        // 定义三角形三个顶点（本地坐标系，原点在中心）
        const vertices = new Float32Array([
            0, 1, 0,    // 顶部顶点
            -1, -1, 0,  // 左下角顶点
            1, -1, 0    // 右下角顶点
        ]);
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

        // 定义UV坐标，让图片正确映射到三角形
        const uvs = new Float32Array([
            0.5, 1,     // 顶部顶点对应图片顶部中心
            0, 0,       // 左下角顶点对应图片左下角
            1, 0        // 右下角顶点对应图片右下角
        ]);
        geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

        // 计算法线（可选，若后续使用需要光照的材质则必须）
        geometry.computeVertexNormals();
        return geometry;
    }, []);

    const scaled = isHovered ? scale.map(value => value * 1.15) : scale;

    return (
        <Decal
            ref={ref}
            position={position}
            scale={scaled}
            geometry={triangleGeometry} // 传入自定义三角形几何体
            onPointerEnter={() => { setIsHovered(true); setIsHoveredG(true); }}
            onPointerLeave={() => { setIsHovered(false); setIsHoveredG(false); }}
            onClick={() => { store.image = image; }}
        >
            <meshBasicMaterial
                map={imageTexture}
                polygonOffset
                polygonOffsetFactor={isHovered ? -2 : -1}
                alphaTest={0.5} // 启用alpha测试，裁剪图片透明区域（若图片无透明通道可改用transparent={true}）
                side={THREE.DoubleSide} // 让三角形正反两面都显示
            />
        </Decal>
    );
};

关键说明 #

• 为什么之前加网格没效果：Decal组件内部会自己处理几何体的渲染逻辑，直接嵌套mesh会被忽略，必须通过geometry属性传入自定义几何体。
• UV坐标的作用：UV坐标决定了图片的像素如何映射到几何体的顶点，错误的UV会导致图片拉伸或错位，上面的配置让三角形的三个顶点对应图片的顶部中心、左下角、右下角，保证图片正常显示。
• 材质参数：alphaTest用于裁剪图片的透明区域（适合带透明通道的图片），如果你的图片没有透明通道，可改为transparent={true}并调整opacity，但alphaTest性能更好。

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