Three.js畫布渲染和透明度

當您在WebGL和canvas渲染之間切換時（如果您有WebGL，它會自動完成javascript檢測），僅線框球體（左側第一個）會發生變化。

隨着WebGL的啓用，您還可以看到球體背面的線框（隱藏在其他球體上的部分，因爲它們具有非透明材質）。

由於WebGL被禁用，您無法欣賞透明度了。

我在準備一個演示，我想爲那些不支持WebGL的瀏覽器提供支持：透明度至關重要，因爲我的想法完全基於它。我的演示文稿只有一個6面立方體，我想即使是舊的CPU也不應該在透明線框中顯示它。

three.js是否支持這個？有什麼辦法可以做到嗎？我應該如何設置材質，以便在畫布渲染時也能正常工作？

爲了進一步證明我的觀點，here's第二個演示。您在WebGL和畫布之間切換時遇到同樣的問題。

當前線框材料聲明是這樣的：

new THREE.MeshBasicMaterial({ color: 0x00ee00, wireframe: true, transparent: true });

，但表現爲只在WebGL的預期。

Jsfiddle here

感謝您的閱讀！

p.s.如果這不能滿足我的需要，我願意採用Three.js的其他選擇。我必須準備這個演示，但我沒有數學/幾何知識來自己做這個，即使它像旋轉3D立方體一樣簡單。

支持WebGL：

enter image description here

與畫布渲染：

enter image description here

來源

2013-04-03 Saturnix

你能告訴你的代碼的一個活生生的例子（jsfiddle.net），問一個具體問題？你是否只關心線框模型？ – WestLangley

感謝發佈。在問題中有兩個示例鏈接，生成線框材質的代碼是張貼的。線框「模型」是什麼意思？我需要渲染網格（邊緣）的線框，而不是面部，如果這就是你的意思。點是一些邊緣與畫布渲染丟失，而與webgl你看到他們。只需使用Safari和Chrome試用這些演示程序，您就會看到不同之處。 – Saturnix

我看到了不同。我在問你關於你的代碼的具體問題，最好的方法是提供一個你的代碼的實例。 – WestLangley

你的情況，工作訣竅使用CanvasRenderer時，是創建兩個相同位置的相同立方體 - 第二個e是倒置的。爲了方便起見，您可以將它們都添加到父對象中，但這不是必需的。

var wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ee00, wireframe: true, transparent: false, opacity: 1 }); 

var wireframeMaterial2 = new THREE.MeshBasicMaterial({ color: 0x00ee00, wireframe: true, transparent: false, opacity: 1, side: THREE.BackSide }); 

var cube = new THREE.Mesh(geometry, wireframeMaterial); 
      parent.add(cube); 

var cube2 = new THREE.Mesh(geometry, wireframeMaterial2); 
      parent.add(cube2);

編輯：更新小提琴：http://jsfiddle.net/k0vcnkqh/

three.js所R.70

來源

2013-04-05 08:09:48 WestLangley

現在，這是一些反直覺，但BRILLIANT的東西！非常感謝您的幫助:) – Saturnix

與問題完全無關：您是如何找到此解決方案的？你剛剛學習了三個.js文檔，並瞭解了三個.BackSide？ Three.js很大，如何能夠像上面發佈的那樣知道所有的提示和技巧？ – Saturnix

通過回答這樣的數百個問題。 :-) – WestLangley

Three.js畫布渲染和透明度

回答

相關問題