如何在反应/三/光纤中增加GLTF对象的辉光效应

Question

我用的是反应/三/纤维

在我的项目中，有一个关于汽车模态的GLTF文件

我想使车头灯发光效果。

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

用聚光灯？

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

我试过了。然而，没有头灯的辉光效应。另外，gltf文件中所有子文件的位置都是0、0、0。因此，我不能将聚光灯的位置设置为前照灯。

Answer 1

两种可能的检查方法，第一，使用一个group来定位轻盈的汽车如下(你可能需要在周围玩一些位置)

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

或者，查看发射属性并将发射属性添加到网格的基础上，

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

根据https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.emissive