消失的对象 - Three.js CanvasRenderer答案

【问题标题】：Disappearing Objects - Three.js CanvasRenderer消失的对象 - Three.js CanvasRenderer
【发布时间】：2014-06-09 14:55:56
【问题描述】：

我很困惑，我不明白为什么我的对象会随着画布渲染器消失。虽然它与 webGL 渲染器完全一样，但我需要在移动设备上显示它，因此无法访问 webGL 渲染器

我尝试过 overdraw:true 但这似乎并没有使丢失的对象消失

http://jsfiddle.net/xH9GD/3/

当我注释掉房间时，这些框仍然存在，但它们在我的 iPhone 上被严重损坏。

我了解 Z-fighting 的概念，但我认为不会发生这种情况，因为每个面的 zPosition 应该与其他面分开

floor = drawTopFacingWall(room.width, room.length );
wall1 = drawLeftFacingWall( room.length, room.depth );
wall2 = drawFrontFacingWall( room.width, room.depth );
wall3 = drawRightFacingWall( room.length, room.depth );
roof = drawBottomFacingWall( room.width, room.length );
wall4 = drawBackFacingWall( room.width, room.depth );

【问题讨论】：

标签： javascript canvas three.js

【解决方案1】：

“消失”的几何图形是由 CanvasRenderer 处理深度排序方式的限制引起的。

WebGLRenderer 在像素级别排序，CanvasRenderer 在多边形级别排序。

您能做的最好的事情就是增加几何体的细分。

var geometry = new THREE.PlaneGeometry( width, height, 10, 10 );

three.js r.66

【讨论】：