Three.js 三JS RawShaderMaterial

我正在尝试使用RawShaderMaterial构建自己的着色器。现在，我已经创建了一个基本的照明设置，这让我想到，如果我以后要使用标准的THREE.JS lights构建场景，并且我希望这些灯光与我构建的自定义着色器交互，那么我将如何进行此操作？

看看

将获取、解析和修改原始着色器 有关如何使用灯光的一些要点：

确保在创建材质时启用了灯光

material = new THREE.RawShaderMaterial({
     uniforms: uniforms,
     vertexShader: vertex,
     fragmentShader: fragment,
     lights: true
  });

通过在着色器代码中包含一个特殊字符串，可以获得场景中每种类型的灯光数量：

string.replace( /NUM_DIR_LIGHTS/g, parameters.numDirLights )
        .replace( /NUM_SPOT_LIGHTS/g, parameters.numSpotLights )
        .replace( /NUM_POINT_LIGHTS/g, parameters.numPointLights )
        .replace( /NUM_HEMI_LIGHTS/g, parameters.numHemiLights );

看一看，你将能够通过制服接近灯光

例如，带有平行光的片段着色器伪代码（取自phong材质代码）

。

geometrycontext几何体；
geometry.position=-vViewPosition；
几何体。法线=法线；
geometry.viewDir=规格化（vViewPosition）；
偶然光直射光；
#if（NUM_DIR_LIGHTS>0）和&defined（RE_Direct）
方向光方向光；
对于（int i=0；i

---

它不完整，但应该说明要点，您可以始终创建材质，例如MeshPhong，将其添加到场景中，并查看它编译的顶点和片段代码（或者在WebGLProgram中捕获它，因为它被解析为更可读的版本，因为它展开循环并替换灯光NUM…）

是否确实要使用RawShaderMaterial而不是ShaderMaterial？这里有一个很棒的基本演示，谢谢，我来看看

#if NUM_DIR_LIGHTS > 0
    struct DirectionalLight {
        vec3 direction;
        vec3 color;
        int shadow;
        float shadowBias;
        float shadowRadius;
        vec2 shadowMapSize;
    };
    uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
#endif

main(){

GeometricContext geometry;
geometry.position = - vViewPosition;
geometry.normal = normal;
geometry.viewDir = normalize( vViewPosition );
IncidentLight directLight;
#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct )
   DirectionalLight directionalLight;
   for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
       directionalLight = directionalLights[ i ];
       directLight = getDirectionalDirectLightIrradiance( directionalLight, geometry );        
       RE_Direct( directLight, geometry, material, reflectedLight );
   }
#endif