OutlineEffect in React Three Fiber

Question

I am a newbie and I am trying to use the OutlineEffect from threejs in my application, using react three fiber. I need the outline of the meshes such as in this example https://threejs.org/examples/#webgl_loader_mmd . I am not sure how to add the effect in react three fiber syntax.

I tried the code below and there is no error but also the effect is not showing. Can anyone help me, please? Thank you in advance!

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

extend({ OutlineEffect })

export default function Model(props) {

    const { gl, camera, scene } = useThree() //finds the renderer
    const model = useGLTF('./Test_Online3DViewerVisible.glb')

    const torus = useRef()

    const effect = new OutlineEffect(gl)

    effect.render(scene, camera)

    return <>
        <mesh ref={torus}>
            <torusGeometry />
            <meshStandardMaterial />
        </mesh>
    </>

}

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

Top Skill Challenger · Accepted Answer · 2023-09-06 09:25:08Z

0

You can use postprocessing for it. I attached the code.

 import * as THREE from 'three';
    import { EffectComposer, OutlineEffect, RenderPass } from 'postprocessing';
    import { Canvas, extend, useThree } from 'react-three-fiber';
    
    extend({ OutlineEffect });
    
    const Effects = () => {
      const { gl, scene, camera, size } = useThree();
    
      const composer = React.useRef();
      React.useEffect(() => void composer.current.setSize(size.width, size.height), [size]);
      return (
        <effectComposer ref={composer} args={[gl]}>
          <renderPass attachArray="passes" args={[scene, camera]} />
          <outlineEffect attachArray="passes" args={[new THREE.Vector2(size.width, size.height), scene, camera]} />
        </effectComposer>
      );
    };

edited Sep 6, 2023 at 9:25

answered Sep 6, 2023 at 9:23

Top Skill Challenger

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

OutlineEffect in React Three Fiber

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related