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

【问题标题】：Two Textures on one Object Three js一个对象上的两个纹理三个js
【发布时间】：2020-02-04 07:01:45
【问题描述】：

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

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

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

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

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

【问题讨论】：

我能想到的 3 种方法。创建自己的着色器。更改内置着色器。在画布上组合纹理并将生成的图像用作纹理。

标签： three.js shader textures 3d-rendering

【解决方案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>
}

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

【讨论】：