Three.js：使用圖像紋理會導致其他對象消失

我試圖形象化時空多維數據集。作爲參考，我在google上找到這個圖像：http://www.intechopen.com/source/html/38305/media/image7.jpeg。其實我設法做到了，但是一旦我開始在立方體的底部使用紋理（這是我的例子中的一個平面），就會出現一個奇怪的錯誤。飛機上方的東西有時並不總是可見的，圖像有時會被扭曲。這是很難解釋的，所以你可能檢查jfiddle了我創建：Three.js：使用圖像紋理會導致其他對象消失

http://jsfiddle.net/fGwsB/

我使用的CanvasRenderer並載入紋理folows：

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

如果背景是包含一個字符串鏈接到圖像文件。

控件已啓用，因此您可能需要縮放並旋轉一下以使錯誤出現。

來源

2014-01-07 Schnodderbalken

由於處理深度排序的方式，「消失」幾何體由於CanvasRenderer的限制而引起。

雖然WebGLRenderer在像素級別排序，但CanvasRenderer會在多邊形級別排序。

您所能做的最好的事情就是增加您已經在做的幾何圖形的鑲嵌細分。

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

此外，添加更多的點到你的線將有所幫助。

就失真而言，也可以通過增加曲面細分來改善。見ThreeJS Cube texture strange visual。

three.js所r.64

來源

2014-01-07 17:39:16 WestLangley

其實，建立鑲嵌並沒有改變結果。添加更多點是有問題的，因爲這些點稍後來自外部數據源。當我切換到WebGLRenderer時，背景是黑色的，沒有顯示透明度。 – Schnodderbalken

這是您看到的工件的解釋。 CanvasRenderer是有限的。如果您想更改渲染器並遇到問題，那麼您需要創建一個新帖子。 – WestLangley

Three.js：使用圖像紋理會導致其他對象消失

回答

相關問題