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.
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