Question

我的目标是在一个对象上渲染两种不同的纹理。

我正在尝试用夜纹理和日纹理来渲染地球，类似于：http://stuffin.space。

问题是我仍然想使用Three.js类，以便可以使用MeshPhongMaterial类添加凹凸贴图和phong反射，而不必编写整个着色器。

我考虑过让两个对象在一侧透明，或者扩展了MeshPhongMaterial类，但这似乎很难。

有没有简单的解决方案可以使用three.js解决此问题？

Answer 1

您可以将功能分配给material's onBeforeCompile property。

传递了一个对象，该对象具有顶点着色器和片段着色器以及制服的源。如

someMaterial.onBeforeCompile = function(shader) {
  console.log(shader.vertexShader);
  console.log(shader.fragmentShader);
});

您可以按照如下方式修改着色器

someMaterial.onBeforeCompile = function(shader) {
  shader.fragmentShader = shader.fragmentShader.replace(thingToReplace, replacement);
});

着色器源是“预扩展的”，这是特定于three.js的格式。例如，上面运行时的默认片段着色器源可能看起来像

#include <common>
#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 <envmap_pars_fragment>
#include <fog_pars_fragment>
#include <specularmap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
    #include <clipping_planes_fragment>
    vec4 diffuseColor = vec4( diffuse, opacity );
    #include <logdepthbuf_fragment>
    #include <map_fragment>
    #include <color_fragment>
    #include <alphamap_fragment>
    #include <alphatest_fragment>
    #include <specularmap_fragment>
    ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
    #ifdef USE_LIGHTMAP
        reflectedLight.indirectDiffuse += texture2D( lightMap, vUv2 ).xyz * lightMapIntensity;
    #else
        reflectedLight.indirectDiffuse += vec3( 1.0 );
    #endif
    #include <aomap_fragment>
    reflectedLight.indirectDiffuse *= diffuseColor.rgb;
    vec3 outgoingLight = reflectedLight.indirectDiffuse;
    #include <envmap_fragment>
    gl_FragColor = vec4( outgoingLight, diffuseColor.a );
    #include <premultiplied_alpha_fragment>
    #include <tonemapping_fragment>
    #include <encodings_fragment>
    #include <fog_fragment>
}

浏览所有这些代码片段，您可以尝试找出要替换的部分。我的猜想是基于this article

的#include <color_fragment>部分

一个对象三个js上的两个纹理

1 个答案: