Three.js爲faceColors和vertexColors重用幾何體

我希望將同一個對象渲染兩次，一次在屏幕上，一次在屏幕外。屏幕上的網格具有幾何圖形和MeshLambertMaterial。這種材料有vertexColors: THREE.VertexColors。屏幕外的網格具有相同的幾何圖形和一個帶有vertexColors: THREE.FaceColors的MeshBasicMeterial。在初始設置期間，每個faceColor被設置爲獨特的顏色。每個vertexColor被設置爲單一顏色（後來，這些vertexcolors可以通過對象上的「繪畫」來改變）。Three.js爲faceColors和vertexColors重用幾何體

然後我想渲染這兩個對象。在this fiddle你會看到兩個並排呈現的場景。 MeshLambertMeterial的對象現在變成半紅色，以使事情更清晰。如您所見，這兩個場景似乎都使用相同的材質。此外，當我切換順序我得到以下錯誤：

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1.

爲了使事情變得更加古怪，當運行撥弄我看到了MeshBasicMaterial渲染兩次的對象。但是，當我在本地運行確切相同的代碼時，我看到用MeshLambertMaterial呈現的對象兩次。

最終我希望帶有MeshBasicMeterial的對象呈現給rendertarget，但是我遇到了同樣的問題。我希望能夠在屏幕上顯示LambertMetarial對象，並且當我用鼠標將鼠標懸停在對象上時，可以在呈現BasicMaterial的renderTarget中獲取該位置的顏色。

我希望問題是清楚的，如果不是，請讓我知道。

fiddle

來源

2013-12-12 SeeDoubleYou

編輯：已解決的問題。

當使用WebGLRenderer時，具有不同材質的兩個網格現在可以共享一個幾何體。

three.js所r.88

來源

2013-12-12 18:27:20 WestLangley

是的，這確實有效，但它不是最有效的方法。特別是當你有大的幾何形狀時，你可以注意到性能下降。無論如何，也要感謝關於重構小提琴的評論。 – SeeDoubleYou

不要與具有不同材質的網格共享幾何圖形。 – WestLangley

我相信[這個需求在three.js的最新版本中已經消失了]（https://github.com/mrdoob/three.js/pull/12718#issuecomment-351333955），現在可以使用具有不同網格的幾何體進行共享材料。 –

首先，始終確保你嘗試最新three.js所隨處可見。特別是，不要使用jsfiddle的r54，而是使用最新的外部資源，如http://threejs.org/build/three.min.js - 這解決了您的一個問題。

最重要的是你需要更新渲染調用之間的頂點顏色（如果它們被改變，你必須這樣做）。下面是做的伎倆：

function render() { 
    var SCREEN_WIDTH = WIDTH, SCREEN_HEIGHT = HEIGHT; 
    camera.aspect = 0.5 * SCREEN_WIDTH/SCREEN_HEIGHT; 
    camera.updateProjectionMatrix(); 

    renderer.clear(); 

    geometry.colorsNeedUpdate = true; 

    // left side 
    renderer.setViewport(0, 0, 0.5 * SCREEN_WIDTH, SCREEN_HEIGHT); 
    renderer.render(scene, camera); 

    geometry.colorsNeedUpdate = true;  

    // right side 
    renderer.setViewport(0.5 * SCREEN_WIDTH, 0, 0.5 * SCREEN_WIDTH, SCREEN_HEIGHT); 
    renderer.render(pickRenderScene, camera); 
}

http://jsfiddle.net/E3F4f/4/

來源

2013-12-12 18:16:43 morris4

的核心問題是在這種情況下，幾何形狀的共享，但在某些情況下，它是可能的 - 你只需要真正瞭解什麼是在內部工作正在進行圖書館。 – WestLangley

@WestLangley：真的，現在圖書館發生的事情非常重要。然而，在許多情況下，three.js的文件不足。我真的希望有一段時間能夠解釋更多的內在工作。 – SeeDoubleYou

@ morris4：這很好，沒有克隆幾何。我將使用renderTarget更明確地測試此解決方案。我以爲我之前嘗試過，但也許以其他順序。任何想法爲什麼訂單改變時出現錯誤？ – SeeDoubleYou

Three.js爲faceColors和vertexColors重用幾何體

回答

相關問題