为了提高性能,我在这样的循环中将网格渲染为一个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);
让我们说,我有一个函数从网格(网格)中选择一组顶点(一个正方形)然后如何将颜色应用于这组顶点(正方形)?
答案 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) );