Две текстуры на одном объекте Три js - PullRequest
Новая
       92

Две текстуры на одном объекте Три js

0 голосов
/ 07 октября 2019

Моя цель - сделать две разные текстуры на одном объекте.

Я пытаюсь визуализировать Землю с ночной текстурой и дневной текстурой, подобной этой: http://stuffin.space.

Проблема в том, что я все еще хотел быиспользуйте классы Three.js, чтобы я мог добавить карту рельефа и отражение фона, используя класс MeshPhongMaterial , без необходимости писать целые шейдеры.

Я думал о том, чтобы два объекта были прозрачными с одной стороны или расширяли класс MeshPhongMaterial, но это кажется довольно сложным.

Есть ли простое решение, чтобы решить это с тремя. JS?

1 Ответ

2 голосов
/ 07 октября 2019

Вы можете назначить функцию для материала onBeforeCompile свойство .

Передается объект, который имеет источник как для вершинных и фрагментных шейдеров, так и для униформ. Как и в 

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>
}

Просматривая все эти фрагменты, вы можете попытаться выяснить, какую часть заменить. Моя догадка для вас - это #include <color_fragment> часть, основанная на этой статье

...