javascript - examples - Problemas con Three.js CanvasRender: las caras parpadean dentro y fuera

three.js tutorial

Question

Estoy dibujando dos figuras relativas simples y la geometría de ellas no se superpone.

Aquí está el ejemplo de código: http://jsfiddle.net/pGD4n/9/

El Trackball Three.js está ahí para que pueda hacer clic y arrastrar para girar los objetos en un espacio 3D. El problema es que a medida que los objetos giran, algunas caras desaparecen y se revela el objeto a continuación. Un poco más de rotación y la cara que falta regresa, pero otros han desaparecido.

Probé BasicMaterial, Normal Material y LambertMaterial con SmoothShading y Flat Shading. He probado la escena con y sin iluminación. Mover los objetos más separados parece corregir el problema, pero en el código de ejemplo dado, las mallas no se superponen y no deberían tener este problema. El problema ocurre tanto en Chrome como en Firefox.

Imagino que cambiar al renderizador OpenGL resolvería el problema, pero para compatibilidad necesitamos usar el renderizador Canvas.

Cualquier ayuda o ideas apreciadas.

Answer 1

Esta es una limitación de CanvasRenderer . Lamentablemente, la ordenación z por píxel no está disponible en CanvasRenderer por lo que básicamente trata de ordenar todo el polígono. Dependiendo de dónde mires desde el centro de un polígono puede estar más cerca que el polígono lateral y por lo tanto "salta".

La única solución en este momento es usar WebGLRenderer . Estoy trabajando en un nuevo procesador para context2d que con suerte resolverá esto sin requerir webgl, pero aún tomará algo de tiempo.