How to add glow effect to GLTF object in react/three/fiber

user_18895854 0
Viewed 88

I am using react/three/fiber

In my project, there is a GLTF file of car modal

I would like to make glow effect for the car head light.

function Car() {
  const gltf = useLoader(
        GLTFLoader,
        process.env.PUBLIC_URL + './modal/tesla/scene.gltf'
    );

    useEffect(() => {
        gltf.scene.scale.set(0.01, 0.01, 0.01);
        gltf.scene.position.set(0, 0.75, 0);
        gltf.scene.rotation.set(0, Math.PI, 0)
        gltf.scene.traverse((object) => {
            if (object instanceof Mesh) { //check callback is a mesh
                object.castShadow = true;
                object.receiveShadow = true;
                object.material.envMapIntensity = 10
            }
        });
    }, [gltf]);

 return (
        <>
          <mesh> 
                <primitive object={gltf.scene} />
            </mesh>
        </>
    )
}

use Spotlight?

     <spotLight
                color={[0, 0.5, 1]}
                intensity={2}
                angle={0.1}
                penumbra={0.5}
                position={[0, 0, 0]}
                castShadow
                ref={blueSpotLight}
            />

I tried. However, there is no glow effect of the head light. Also, all children's position in gltf file is [0,0,0]. Therefore, I cant set the spotlight position ref to the head light.

react-three-fiber three.js javascript
1 Answers

Two possible approaches to look into, firstly use a group to position the light relitive to the car as below (you may need to play around with positions a bit)

function Car() {
  const gltf = useLoader(
        GLTFLoader,
        process.env.PUBLIC_URL + './modal/tesla/scene.gltf'
    );

    useEffect(() => {
        gltf.scene.scale.set(0.01, 0.01, 0.01);
        gltf.scene.position.set(0, 0.75, 0);
        gltf.scene.rotation.set(0, Math.PI, 0)
        gltf.scene.traverse((object) => {
            if (object instanceof Mesh) { //check callback is a mesh
                object.castShadow = true;
                object.receiveShadow = true;
                object.material.envMapIntensity = 10
            }
        });
    }, [gltf]);

 return (
        <>
          <group>
              <spotLight
                color={[0, 0.5, 1]}
                intensity={2}
                angle={0.1}
                penumbra={0.5}
                position={[0, 0, 0]}
                castShadow
                ref={blueSpotLight}
            />
             <mesh> 
                <primitive object={gltf.scene} />
            </mesh>
          </group>
        </>
    )
}

Alternatively have a look at the emissive property and adding the emissive property to the mateiral of your mesh,

 <meshStandardMaterial emissive={[0.5, 0.5, 0.5]} color={[0, 0, 0]} />

as per https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.emissive

user_34256540
Related