Question

我想通过使其作为MeshStandardMaterial来自定义ThreeJS中的材质着色器ShaderMaterial。这是材料代码：

const material = new THREE.ShaderMaterial({
  uniforms: THREE.UniformsUtils.merge([
    {
      color: { value: new THREE.Color( 0xeeeeee ) },
      opacity: { value: 1.0 },

      map: { value: null },
      offsetRepeat: { value: new THREE.Vector4( 0, 0, 1, 1 ) },

      specularMap: { value: null },
      alphaMap: { value: null },

      envMap: { value: null },
      flipEnvMap: { value: - 1 },
      reflectivity: { value: 1.0 },
      refractionRatio: { value: 0.98 }
    },
    THREE.UniformsLib.aomap,
    THREE.UniformsLib.lightmap,
    THREE.UniformsLib.emissivemap,
    THREE.UniformsLib.bumpmap,
    THREE.UniformsLib.normalmap,
    THREE.UniformsLib.displacementmap,
    THREE.UniformsLib.roughnessmap,
    THREE.UniformsLib.metalnessmap,
    THREE.UniformsLib.fog,
    THREE.UniformsLib.lights,
    {
      emissive: { value: new THREE.Color( 0x000000 ) },
      roughness: { value: 0.5 },
      metalness: { value: 0 },
      envMapIntensity: { value: 1 } // temporary
    }
  ] ),

  vertexShader: `
    #define PHYSICAL
    varying vec3 vViewPosition;
    #ifndef FLAT_SHADED
        varying vec3 vNormal;
    #endif
    #include <common>
    #include <uv_pars_vertex>
    #include <uv2_pars_vertex>
    #include <displacementmap_pars_vertex>
    #include <color_pars_vertex>
    #include <fog_pars_vertex>
    #include <morphtarget_pars_vertex>
    #include <skinning_pars_vertex>
    #include <shadowmap_pars_vertex>
    #include <specularmap_pars_fragment>
    #include <logdepthbuf_pars_vertex>
    #include <clipping_planes_pars_vertex>
    void main() {
        #include <uv_vertex>
        #include <uv2_vertex>
        #include <color_vertex>
        #include <beginnormal_vertex>
        #include <morphnormal_vertex>
        #include <skinbase_vertex>
        #include <skinnormal_vertex>
        #include <defaultnormal_vertex>
        #ifndef FLAT_SHADED
            vNormal = normalize( transformedNormal );
        #endif
        #include <begin_vertex>
        #include <displacementmap_vertex>
        #include <morphtarget_vertex>
        #include <skinning_vertex>
        #include <project_vertex>
        #include <logdepthbuf_vertex>
        #include <clipping_planes_vertex>
        vViewPosition = - mvPosition.xyz;
        #include <worldpos_vertex>
        #include <shadowmap_vertex>
        #include <fog_vertex>
    }`,
  fragmentShader: `
    #define PHYSICAL
    uniform vec3 diffuse;
    uniform vec3 emissive;
    uniform float roughness;
    uniform float metalness;
    uniform float opacity;
    #ifndef STANDARD
        uniform float clearCoat;
        uniform float clearCoatRoughness;
    #endif
    varying vec3 vViewPosition;
    #ifndef FLAT_SHADED
        varying vec3 vNormal;
    #endif
    #include <common>
    #include <packing>
    #include <color_pars_fragment>
    #include <uv_pars_fragment>
    #include <uv2_pars_fragment>
    #include <map_pars_fragment>
    #include <alphamap_pars_fragment>
    #include <aomap_pars_fragment>
    #include <lightmap_pars_fragment>
    #include <emissivemap_pars_fragment>
    #include <envmap_pars_fragment>
    #include <fog_pars_fragment>
    #include <bsdfs>
    #include <cube_uv_reflection_fragment>
    #include <lights_pars>
    #include <lights_physical_pars_fragment>
    #include <shadowmap_pars_fragment>
    #include <bumpmap_pars_fragment>
    #include <normalmap_pars_fragment>
    #include <roughnessmap_pars_fragment>
    #include <metalnessmap_pars_fragment>
    #include <logdepthbuf_pars_fragment>
    #include <clipping_planes_pars_fragment>
    void main() {
        #include <clipping_planes_fragment>
        vec4 diffuseColor = vec4( diffuse, opacity );
        ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
        vec3 totalEmissiveRadiance = emissive;
        #include <logdepthbuf_fragment>
        #include <map_fragment>
        #include <color_fragment>
        #include <alphamap_fragment>
        #include <alphatest_fragment>
        #include <specularmap_fragment>
        #include <roughnessmap_fragment>
        #include <metalnessmap_fragment>
        #include <normal_flip>
        #include <normal_fragment>
        #include <emissivemap_fragment>
        #include <lights_physical_fragment>
        #include <lights_template>
        #include <aomap_fragment>
        vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
        gl_FragColor = vec4( outgoingLight, diffuseColor.a );
        #include <premultiplied_alpha_fragment>
        #include <tonemapping_fragment>
        #include <encodings_fragment>
        #include <fog_fragment>
    }`

});

Answer 1

从r88开始，THREE.Water代码实现了一个使用ShaderMaterial以及来自ThreeJS内部的一些内部代码块的示例。
r86中引入的onBeforeCompile材质方法提供了一种简单明了的方法，可以将更改应用于内置材质。

在ThreeJS中自定义材料

1 个答案: