CODEWITHSUNDEEP
three.jsreact-three-fiber
LSH
LSH

Reputation: 11

OutlineEffect in React Three Fiber

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')

Upvotes: 1

Views: 628

Answers (1)

Top Skill Challenger
Top Skill Challenger

Reputation: 11

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>
      );
    };

Upvotes: 0

Related Questions