Cuando tiene dos planos en Three.js/WebGL y uno o ambos son transparentes, a veces el plano detrás quedará oculto por el plano transparente de arriba. ¿Por qué es esto?Three.js/WebGL: planos transparentes que ocultan otros planos detrás de ellos
Esto no es un error, es solo cómo funciona OpenGL (y, por lo tanto, WebGL). Las superficies transparentes no funcionan bien con el z-buffer, y como tales deben ser ordenadas manualmente y renderizadas de atrás hacia adelante. Three JS intenta hacer esto por usted (razón por la cual el problema desaparece cuando establece el valor X> 0) pero no puede manejar de forma robusta el caso de la geometría de intersección como lo muestra.
He explicado el problema más a fondo en un different SO question, por lo que es posible que desee hacer referencia a eso.
Pruebe agregar alphaTest: 0.5 al material.
Lo he intentado, no funcionó:/Supongo que es un problema web, así que tengo que volver a diseñar cómo mi juego muestra planos. Aunque se verá un poco pirateado. – MaiaVictor
Tengo un plano con una textura basada en lienzo asignada a él que muestra texto. En ciertos ángulos/posiciones tuve problemas con la transparencia del material de textura y esto lo solucionó, ¡gracias! – plyawn
Nota: 'alphaTest' es un umbral que hará que las áreas semitransparentes en las texturas sean totalmente opacas (cuando la opacidad del píxel sea> treshold) o totalmente transparentes (cuando la opacidad del píxel sea
fwiw, si tiene muchos planos paralelos (no puede ver su muestra, Google no puede resolver su dominio), es fácil mantenerlos ordenados a lo largo del eje perpendicular. Para una lista de planos [A B C D], el orden para dibujar será [A B C D] o [D C B A] y nada más. Por lo tanto, no es necesario que la clasificación ordene el rendimiento. Solo mantenlos en orden sobre la marcha.
el problema es que tengo algunos planos que deberían representarse cruzando los otros. Como si fueran espadas planas 3d. ¿Puedo preguntar, cómo encontraste esa pregunta mucho tiempo después de que se me preguntó y cómo vinieron 4 videntes? – MaiaVictor
Tus preguntas sobre el comportamiento de las personas No puedo responder :) Sin embargo, si tienes polígonos que se cruzan, no hay una solución correcta fácil que no sea por fragmento como K-Buffers o el algoritmo original de A-Buffer, a menos que específicamente las intersecciones triangulares y teselarlas sobre la marcha. – bjorke
Digamos que está utilizando alguna imagen * .png transparente. Entonces esto ayudaría:
new THREE.MeshBasicMaterial({ side:THREE.BackSide,map:texture, depthWrite: false, depthTest: false });
Por alguna razón, la parte 'side: THREE.BackSide' impidió que mis imágenes se renderizaran todas juntas. Pero aparte de eso, el resto funcionó muy bien! –
Probablemente desee utilizar TRREE.DoubleSide para que sea visible desde ambos lados. – Blaise
¡Esto realmente funciona muy bien! – polyclick
Al establecer la propiedad depthWrite a false solucionado mi problema.
new THREE.MeshBasicMaterial({
opacity: 0.25,
transparent: true,
side: THREE.DoubleSide,
depthWrite: false
});
GRACIAS. ¡No más "problema de caja negra transparente"! – Andy
Gracias por la respuesta, pero me está diciendo que es mejor rediseñar mi juego o que es una solución para hackear Three.JS? – MaiaVictor
@Toji, la pregunta a la que se refiere no trata exactamente con el mismo problema. En la otra pregunta, es solo una parte del objeto/textura que es transparente, donde en esta pregunta todo el plano es transparente y esto es fácilmente solucionable simplemente desactivando el 'depthWrite' totalmente para el plano transparente. – Wilt