Three.js：使用图像纹理会导致其他对象消失 [英] Three.js: using an image texture causes other objects to disappear

问题描述

我正在尝试显示一个时空立方体。作为参考，我采取了在Google上找到的这张图片： http：// www .intechopen.com / source / html / 38305 / media / image7.jpeg 。
实际上我设法做到了，但是一旦我开始对立方体的底部（在我的例子中是平面）使用纹理时，就会出现一个奇怪的错误。飞机正上方的东西有些并不总是可见的，并且图像有时会变形。很难解释，所以您可以检查一下我创建的jfiddle：

I'm trying to visualize a space time cube. As a reference I take this image I found on google: http://www.intechopen.com/source/html/38305/media/image7.jpeg . Actually I managed to do it but there is a weird bug as soon as I start to use a texture for the bottom of the cube (which is a plane in my case). The things that are just above the plane are some how not always visible and the image is sometimes distorted. It is hard to explain so you might check the jfiddle out I created:

http://jsfiddle.net/fGwsB/

我正在使用CanvasRenderer并按照以下方式加载纹理：

I am using the CanvasRenderer and load the texture as folows:

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

其中背景是一个包含图像文件链接的字符串。

Where background is a string containing the link to the image file.

已启用控件，因此您可能需要稍微缩放和旋转才能出现该错误。

Controls are enabled so you might need to zoom and rotate a bit for the bug to arise.

推荐答案

消失的几何形状是由于 CanvasRenderer 的限制而导致的，原因是它处理深度排序的方式。

The "disappearing" geometry is caused by a limitation of CanvasRenderer due to the way it handles depth-sorting.

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

While WebGLRenderer sorts at the pixel level, CanvasRenderer sorts at the polygon level.

您能做的最好的事情就是增加像素的细分

The best you can do is to increase the tessellation of your geometry, which you are already doing.

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

此外，在行中添加更多点也将有所帮助。

Also, adding more points to your lines will help.

就变形而言，细分化程度的提高也可以改善这种情况。参见 ThreeJS Cube纹理奇异的视觉。

As far as the distortion goes, that is also improved by increased tessellation. See ThreeJS Cube texture strange visual.

three.js r.64

three.js r.64

这篇关于Three.js：使用图像纹理会导致其他对象消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！