0
253
Views¿Cómo hacer que la iluminación de emissiveMap solo en áreas oscuras en three.js?
Con three.js, renderizo la tierra con texturas. También agrego una textura emisiva para agregar la luz de la ciudad. Pero tengo un problema, incluso las áreas de luz de la tierra emiten la luz de las ciudades.
Ejemplo:
¿Es posible hacer que la textura emisiva se ilumine solo en áreas oscuras? no encuentro formas.
Mi textura se establece así:
material.emissiveMap = loader.load('../assets/earth-light.png'); material.emissiveIntensity = 0.005; material.emissive = new THREE.Color(163, 169, 133);1 answers
Answer question0
He estado pensando en este problema después de mi comentario inicial. Creo que hay una solución. Podría renderizar las luces de su ciudad en una capa separada después de renderizar el globo terráqueo. Las capas le permiten realizar pases de renderizado separados con luces compartimentadas que no se afectan entre sí.
Con esto en mente, en lugar de hacer que las ciudades sean emisivas, haz que reflejen una segunda luz que brilla desde el lado opuesto del sol.
La capa 1 renderiza:
- Luz de sol
- Esfera con textura de tierra
Renders de capa 2:
- Luz en el lado opuesto del sol
- Otra esfera con textura de ciudades
El material de tu ciudad se vería así:
const cityOutlines = loader.load('../assets/earth-light.png'); const citiesMaterial = new THREE.MeshLambertMaterial({ transparent: true, alphaMap: cityOutlines, color: new THREE.Color(163, 169, 133), depthTest: false, // So it doesn't z-fight the main Earth sphere blending: THREE.AdditiveBlending // Lights are additive });Este material podría ser iluminado desde el lado opuesto del sol. Con aditivoBlending, las partes negras que no reciben luz serán invisibles y las partes brillantes brillarán.
Para ver las capas en acción y cómo configurarlas, visite esta demostración en el sitio web de Three.js . Puede ver el código fuente haciendo clic en el icono < > .