WebGL / Three.js一个复杂对象(网格)上的不同材质

时间:2013-07-05 13:21:10

标签: javascript three.js webgl material

为了提高性能,我在这样的循环中将网格渲染为一个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);

让我们说,我有一个函数从网格(网格)中选择一组顶点(一个正方形)然后如何将颜色应用于这组顶点(正方形)?

2 个答案:

答案 0 :(得分:0)

在代码中,您可以使用一种材质创建一个对象网格。你不能为对象的一部分设置新材料。在您的情况下,您可以编写自己的着色器并将它们设置为pos.x,pos.y和textere属性,或者按部分绘制网格(但这是一个坏主意)

答案 1 :(得分:0)

首先:将网格创建为具有多个线段(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);

希望它有所帮助,

微米。

PS:

也许你必须围绕X轴或Z轴旋转平面Geo 180degs - 我认为PlaneGeometry是用法线向下创建的 - 但不确定。

如果需要,你可以通过以下方式进行轮换:

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