estoy usando react/tres/fibra
En mi proyecto, hay un archivo GLTF de car modal
Me gustaría hacer un efecto de brillo para la luz de la cabeza del automóvil.
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> </> ) }usar foco?
<spotLight color={[0, 0.5, 1]} intensity={2} angle={0.1} penumbra={0.5} position={[0, 0, 0]} castShadow ref={blueSpotLight} />Lo intenté. Sin embargo, no hay efecto de brillo de la luz principal. Además, la posición de todos los niños en el archivo gltf es [0,0,0]. Por lo tanto, no puedo configurar la referencia de posición del foco a la luz principal.
Dos enfoques posibles para investigar, en primer lugar, use un group para colocar la luz en relación con el automóvil como se muestra a continuación (es posible que deba jugar un poco con las posiciones)
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> </> ) }Alternativamente, eche un vistazo a la propiedad emisiva y agregue la propiedad emisiva al material de su malla,
<meshStandardMaterial emissive={[0.5, 0.5, 0.5]} color={[0, 0, 0]} />según https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.emissive