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);

比如说，我有一个函数，从网格(mesh)中选择一组顶点(一个正方形)，然后如何只对这组顶点(正方形)应用颜色？

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.也许你必须将planeGeo绕X轴或Z轴旋转180度--我想PlaneGeometry是在法线向下的情况下创建的--但不确定。

也许你得把 planeGeo 绕 X 或 Z 轴旋转 180degs -- 我想 PlaneGeometry 是在法线向下的情况下创建的 -- 但不确定。

如果需要，你可以通过以下方式进行旋转。

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