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

Question

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

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

问题是我仍然想使用 Three.js classes，这样我就可以使用 MeshPhongMaterial [=24 添加凹凸贴图和 phong 反射=]，而不必编写整个着色器。

我想过有两个对象，其中一个在一侧是透明的，或者扩展 MeshPhongMaterial class，但这似乎很难。

是否有一个简单的解决方案可以用 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);
});

着色器源是 "pre expanded"，这意味着它是 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>
}

查看所有这些片段，您可以尝试找出要替换的部分。我对你的猜测是 #include <color_fragment> 部分基于 this article

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

Two Textures on one Object Three js

shader

textures

3d-rendering

three.js