3d Three.js：使用图像纹理会导致其他对象消失

我试图想象一个时空立方体。作为参考，我在谷歌上找到了这张图片：。 事实上我成功地做到了，但是当我开始使用立方体底部的纹理（在我的例子中是一个平面）时，出现了一个奇怪的错误。平面上方的物体并不总是可见的，图像有时会失真。这很难解释，因此您可以查看我创建的jfiddle：

我正在使用画布渲染器并加载纹理，如下所示：

texturemat = new THREE.MeshLambertMaterial({
    side: THREE.DoubleSide,
    map: THREE.ImageUtils.loadTexture(background)});

其中，background是包含指向图像文件的链接的字符串

控件已启用，因此您可能需要缩放和旋转一点，以防出现错误。

几何体“消失”是由于画布渲染器处理深度排序的方式受到限制而导致的

WebGLRenderer在像素级别进行排序，而CanvasRenderer在多边形级别进行排序

您所能做的最好的事情就是增加几何体的细分，您已经在这样做了

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

此外，在线条中添加更多点也会有所帮助

就失真而言，增加细分也可以改善失真。看

---

three.js r.64

实际上，设置细分并没有改变结果。添加更多点是有问题的，因为这些点稍后来自外部数据源。当我切换到WebGLRenderer时，背景是黑色的，没有显示透明度。这就是您看到的工件的解释。游说活动有限。如果您想更改渲染器，并且遇到问题，那么您需要发布一篇新文章。