javascript - examples - three.js: dibujar dos esferas transparentes superpuestas y ocultar la intersección

three.min.js download

Question

Tengo dos esferas transparentes y superpuestas en un contexto web. Durante la superposición, me gustaría controlar cómo se dibujan las esferas. Puedes ver mi problema en esta página:

http://andrewray.me/stuff/circle-clip.html

Cuando la esfera roja y azul se superponen, me gustaría que la esfera azul se oculte detrás de la esfera roja.

Si simplemente cambio el orden en que se agregan las esferas a la escena (si agrego primero la esfera grande ), obtengo el comportamiento deseado : http://andrewray.me/stuff/circle-clip-correct.html

Sin embargo, las cosas son diferentes en mi proyecto. Veo la intersección a pesar de que agrego la esfera grande primero.

Lo más cercano que he conseguido es mover las esferas más pequeñas más cerca de la cámara. en este ejemplo, he movido las esferas más pequeñas 10 unidades más cerca : http://andrewray.me/stuff/b-test/

Sin embargo, si se mueve con las teclas de flecha, puede ver que la intersección parpadea de vez en cuando, y que a veces queda completamente visible (especialmente con burbujas que vienen del lado)

He intentado configurar depwthWrite: false en ambos materiales, pero eso no tiene ningún efecto.

Me he equivocado un poco con renderer.sortObjects = false pero creo que esto está eliminando el orden de sorteo "natural" que quiero que ocurra con el resto de la escena. Solo estoy en desacuerdo con estas esferas.

1. ¿Puedo forzar el orden de dibujo de objetos transparentes en webgl / three.js? Parece que están luchando z incluso cuando se mueven las esferas más pequeñas 10 unidades más cerca
2. o hay alguna forma de forzar el comportamiento de la superposición de objetos transparentes?

Answer 1

Después de mucho golpear la cabeza (no del tipo bueno), he descubierto que puedes forzar el orden del dibujo con una bandera en la malla.

Para Three r70 y superior use renderOrder

mesh.renderOrder = 0.5; // Value from 0 to 1

Para Three r69 y abajo use renderDepth

mesh.renderDepth = 0.5; // Value from 0 to 1

Dibuja primero el más bajo, el último más alto.