Настроить материал в ThreeJS

Question

Я хотел бы настроить шейдеры материала в ThreeJS, MeshStandardMaterial. Пока я просто хочу, чтобы он работал как шейдерный материал: я скопировал шейдеры вершин и фрагментов и форму. Затем я попытаюсь сделать это: я создаю сетку с BufferGeometry и этим материалом. Но он не может отобразить: Cannot read property 'color' of undefined по функции StructuredUniform.setValue. Что не так ? Что мне не хватает?

Вот код материала:

var 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>', 
    '}' 
    ].join('\n'), 
    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>', 
    '}' 
    ].join('\n') 

}); 

Answer 1

• По R88 THREE.Water кода реализует пример использования ShaderMaterial вместе с некоторой Внутренностью куски кода из ThreeJS внутренних органов.

• Способ материала onBeforeCompile, представленный в r86, обеспечивает легкий и короткий способ применения изменений во встроенных материалах.