React Three Fiber中Three.js OutlineEffect使用问题求助

你的代码无法显示轮廓效果，核心问题是没有将OutlineEffect集成到React Three Fiber的渲染循环中，且初始化方式不符合R3F的工作逻辑。下面是修复方案：

问题分析 #

1. 直接在组件函数内创建OutlineEffect并调用render，这只会执行一次，而R3F的每一帧都会重新渲染场景，覆盖这次操作，所以看不到效果。
2. 未配置OutlineEffect的基础参数（比如轮廓厚度、颜色），默认参数可能导致效果极不明显。
3. 未正确关联需要显示轮廓的物体，OutlineEffect不会自动作用于所有网格。

修复后的完整代码 #

import { useGLTF } from "@react-three/drei"
import React, { useRef, useEffect } from "react";
import { OutlineEffect } from "three/examples/jsm/effects/OutlineEffect.js"
import { useThree, useFrame } from "@react-three/fiber";

export default function Model(props) {
    const { gl, camera, scene } = useThree()
    const model = useGLTF('./Test_Online3DViewerVisible.glb')
    const torusRef = useRef()
    const outlineEffect = useRef(null)

    // 仅在组件挂载时初始化OutlineEffect
    useEffect(() => {
        outlineEffect.current = new OutlineEffect(gl, {
            defaultThickness: 0.005, // 调整轮廓厚度，数值越大轮廓越粗
            defaultColor: [0, 1, 0], // 轮廓颜色（RGB 0-1范围）
            defaultAlpha: 1,
            defaultKeepAlive: true
        })

        // 组件卸载时清理资源
        return () => outlineEffect.current?.dispose()
    }, [gl])

    // 将OutlineEffect注入R3F的渲染循环，确保每一帧都执行轮廓渲染
    useFrame(() => {
        outlineEffect.current?.render(scene, camera)
    })

    return <>
        <mesh ref={torusRef}>
            <torusGeometry />
            <meshStandardMaterial color="#ffffff" />
        </mesh>
        {/* 加载GLTF模型 */}
        <primitive object={model.scene} />
    </>
}

useGLTF.preload('./Test_Online3DViewerVisible.glb')

额外优化点 #

• 指定单个物体的轮廓样式：如果只想让特定网格显示轮廓，可给对应材质添加自定义参数：

  useEffect(() => {
      if (torusRef.current) {
          torusRef.current.material.userData.outlineParameters = {
              thickness: 0.01,
              color: [1, 0, 0] // 红色轮廓
          }
      }
  }, [])
  

• GLTF模型轮廓适配：如果GLTF模型不显示轮廓，需要遍历模型所有网格，确保材质支持OutlineEffect（比如替换为MeshStandardMaterial），或手动给每个网格的材质添加userData.outlineParameters。

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