WebGL / Three.js 一個復雜對象（網格）上的不同材料

Question

為了提高性能，我在這樣的循環中將網格渲染到一個 THREE.Geometry() 對象：

build : function(){    // simplified

  square = new THREE.Geometry();
  face = 0;

  for( r = 0; r < this["rows"]; r++)
   for( c = 0; c < this["cols"]; c++)

       // creates square
       square.vertices.push(new THREE.Vector3( x,  y, z));
       square.vertices.push(new THREE.Vector3( x + w, y, z));
       square.vertices.push(new THREE.Vector3( x + w, y - h, z));
       square.vertices.push(new THREE.Vector3( x, y - h, z));

       square.faces.push(new THREE.Face4(face + 0, face + 1, face + 2, face + 3));

       face+=4;
  // end of loops 


  // This adds material to the whole grid.
  // How to do it to each individual square?

  squareMaterial = new THREE.MeshBasicMaterial({
        color:"white",
        side:THREE.DoubleSide
  });

  grid = new THREE.Mesh(square, squareMaterial); 
  scene.add(grid);

可以說，我有一個函數可以從網格（網格）中選擇一組頂點（一個正方形），然后如何僅將顏色應用於這組頂點（正方形）？

Answer 1

在您的代碼中，您使用一種材料創建一個對象網格。 您不能為對象的一部分設置新材質。 在您的情況下，您可以編寫自己的着色器並設置它們的屬性，例如 pos.x、pos.y 和 textere，或者按部分繪制網格（但這是一個壞主意）

Answer 2

首先：將網格創建為具有多個線段 (10x10) 的平面幾何體：

var planeGeo = new THREE.PlaneGeometry( 100, 100, 10, 10 );

第二：為您希望更改材質的任何面設置 materialIndex（例如顏色）

像這樣：

planeGeo.faces[5].materialIndex=1;

注意：默認 materialIndex 為 0；

然后創建兩個或多個材質並將它們放入數組：

var materialsArray= [
        new THREE.MeshBasicMaterial({color:0xFF0000, side:THREE.DoubleSide}), // matIdx = 0
        new THREE.MeshBasicMaterial({color:0x00FF00, side:THREE.DoubleSide}) // matIdx = 1
    ];

然后創建一個多材質：

var multiMaterial = new THREE.MeshFaceMaterial( materialsArray );

然后創建網格並將其添加到場景中：

grid = new THREE.Mesh(planeGeo, squareMaterial); 
scene.add(grid);

希望有幫助，

M。

PS：

也許您必須圍繞 X 軸或 Z 軸將 planeGeo 旋轉 180 度 - 我認為 PlaneGeometry 是在法線向下的情況下創建的 - 但不確定。

如果需要，您可以通過以下方式進行輪換：

planeGeo.applyMatrix ( new THREE.Matrix4().makeRotationX(Math.PI) );