網格基本材質不渲染質感四邊形

我剛剛開始學習一些Three.js。我有一個基本的webgl示例工作。但是現在我想要得到一個在THREE.js框架內工作的類似示例，我遇到了紋理問題。網格基本材質不渲染質感四邊形

該紋理加載了createjs preloader。

我已經嘗試將htmlImageElement追加到文檔，以檢查它是否已在材料創建之前加載。這看起來很好。所以我不認爲我的問題是在紋理加載完成之前創建材質。一直是其他人的問題。

此外，我已經測試了我以前的webgl示例中的紋理，並且會拋出相同的錯誤，所以我不認爲使用的圖像無效。

以下示例中的四邊形將呈現爲藍色正方形，但是將材質添加到材質的那一刻會引發錯誤。 GL_INVALID_OPERATION：glDrawElements：嘗試訪問屬性1中超出範圍的頂點。

我對Three.js幾乎沒有經驗，所以我認爲問題在於如何創建材質，場景或幾何體。雖然我真的跑出了想法。

我正在使用TypeScript。

private createPaper(): THREE.Mesh { 
     var paperGeo = new THREE.Geometry(); 
     paperGeo.vertices.push(new THREE.Vector3(1, 1, 0)); 
     paperGeo.vertices.push(new THREE.Vector3(3, 1, 0)); 
     paperGeo.vertices.push(new THREE.Vector3(3, 3, 0)); 
     paperGeo.vertices.push(new THREE.Vector3(1, 3, 0)); 

     paperGeo.faces.push(new THREE.Face3(0,1,2)); 
     paperGeo.faces.push(new THREE.Face3(2,3,0)); 

     var img: HTMLImageElement = m.getAsset("paper0"); 

     this.paperTex = new THREE.Texture(img, THREE.UVMapping,THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping, 
      THREE.LinearFilter, THREE.LinearFilter, THREE.RGBAFormat, THREE.UnsignedByteType, 0); 

     var paperMaterial = new THREE.MeshBasicMaterial({ 
      map:this.paperTex, color: 0x0000dd, side: THREE.DoubleSide 
     }); 

     var paper = new THREE.Mesh(paperGeo, paperMaterial); 


     return paper; 
    }

來源

2013-10-09 Culzean

我使用PlaneGeometry得到了一個不錯的藍色四渲染。更清晰和更簡單。現在沒有錯誤，但當我嘗試應用我的紋理時只是得到一個黑色的四邊形。 – Culzean

感謝WestLangley，現在工作很完美。需要更新是否真的有很多開銷？ – Culzean

除非遇到性能問題，否則不要擔心開銷。 – WestLangley

至少，您需要在geometry.faceVertexUvs [0]中指定UV。但首先，讓它與THREE.PlaneGeometry一起工作。

如果您正在使用texture = new THREE.Texture()創建紋理，你需要設置texture.needsUpdate = true;另一種方法是使用THREE.ImageUtils.LoadTexture();

three.js所r.61

來源

2013-10-09 18:52:33 WestLangley

網格基本材質不渲染質感四邊形

回答

相關問題