ThreeJS - 根据对象的位置应用多个纹理

Question

我最近开始使用 ThreeJS，并决定使用球体网格创建地球模型。我还创建了一个太阳模型，并希望根据地球的位置将两种不同的纹理应用于地球模型。更具体地说，我想在地球球体不面向太阳的一侧应用“夜间”纹理，并在面向太阳的一侧应用“白天”纹理。 “夜晚”版本显示地球总体较暗，并且有灯光闪烁。

除此之外，我觉得某种“羽化”会让它更加逼真，这样两个纹理之间就会有一个柔和的过渡，而不是一个硬的轮廓。我该怎么办？

Answer 1

据我所知，有两种方法可以实现你想要的。 最简单的是使用“THREE.MeshPhongMaterial”，并应用如下纹理。

const plight = new THREE.PointLight(0xffffff, 1);
plight.position.set(0, 0, 0)
scene.add(plight);

const geometry = new THREE.SphereGeometry(radius, 32, 32);

const night_texture_loader = new THREE.TextureLoader();
const night_texture = night_texture_loader.load('earth_nightmap.jpg');

const day_texture_loader = new THREE.TextureLoader();
const day_texture = day_texture_loader.load('earth_daymap.jpg');

const earth_specularmap_loader = new THREE.TextureLoader();
const earth_specularmap = earth_specularmap_loader.load('earth_specularmap.tif');

const material = new THREE.MeshPhongMaterial({
    map: day_texture,
    emissiveMap: night_texture,
    emissive: new THREE.Color(0x888888),
    emissiveIntensity: 1,
    specularMap: earth_specularmap,
    specular: 1,
    shininess: 30,
});

const earth = new THREE.Mesh(geometry, material);
earth.position.set(1, 0, 0)
scene.add(earth);

第二种方法是使用自定义Shader，“THREE.ShaderMaterial”，但这设置起来要复杂得多（我没有成功）。