在三个js中为3D模型添加边框

Question

大家好，我想在我的3D模型上设置一个轮廓，我想知道是否有人已经成功地用react三光纤设置了它

const ModelStl = () => {
const geom = useLoader(STLLoader, pathModelStl);
const ref = useRef();
const { camera } = useThree();
useEffect(() => {
console.log(ref)
camera.lookAt(ref.current.position);
});
return (
<>
<mesh ref={ref} rotation={[-Math.PI / 2, 0, 0]} scale={0.1}>
<primitive
object={geom}
attach="geometry"
position={[0, 0, 0]}
segments={10}
/>
<meshStandardMaterial color={"gray"} />
</mesh>
<ambientLight />
<pointLight position={[10, 10, 10]} />
</>
);
};

我得到的结果在此处输入图像描述

结果是在此处输入图像描述

Answer 1

看一下大纲过程：https://threejs.org/examples/webgl_postprocessing_outline.html

以下是使用react三光纤(不是我的(的实现：https://codesandbox.io/s/mq5oy