2

パフォーマンスを向上させるために、このようなループでグリッドを 1 つの 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);

たとえば、グリッド (メッシュ) から頂点のセット (1 つの正方形) を選択する関数があるとします。次に、この頂点のセット (正方形) のみに色を適用する方法を教えてください。

4

2 に答える 2

0

コードでは、1 つのマテリアルで 1 つのオブジェクト グリッドを作成します。オブジェクトの一部に新しいマテリアルを設定することはできません。あなたの場合、独自のシェーダーを作成し、それらに属性 pos.x、pos.y および textere を設定するか、パーツごとにグリッドを描画できます (ただし、これは悪い考えです)。

于 2013-07-05T13:43:57.263 に答える
0

最初に: 複数のセグメント (10x10) を持つ平面ジオメトリとしてグリッドを作成します。

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

2番目：マテリアルを変更したい面のmaterialIndexを設定します（色など）

そのようです：

planeGeo.faces[5].materialIndex=1;

注: デフォルトの materialIndex は 0 です。

次に、2 つ以上のマテリアルを作成し、それらを配列に配置します。

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:

おそらく、planeGeo を X 軸または Z 軸を中心に 180 度回転させる必要があります。PlaneGeometry は法線を下にして作成されていると思いますが、よくわかりません。

必要に応じて、次の方法でローテーションを行います。

planeGeo.applyMatrix ( new THREE.Matrix4().makeRotationX(Math.PI) );
于 2013-07-08T05:02:54.593 に答える