三.js - 多重材质平面 [英] Three.js - multiple material plane

问题描述

我正在尝试在一个平面上使用多种材质来制作一个简单的地形编辑器.所以我创建了几个材质，并尝试为平面中的每个顶点分配一个材质索引:

I'm trying to have multiple materials on a single plane to make a simple terrain editor. So I create a couple of materials, and try to assign a material index to each vertex in my plane:

var materials = [];
materials.push(new THREE.MeshFaceMaterial( { color: 0xff0000 }));
materials.push(new THREE.MeshFaceMaterial( { color: 0x00ff00 }));
materials.push(new THREE.MeshFaceMaterial( { color: 0x0000ff }));
// Plane
var planegeo = new THREE.PlaneGeometry( 500, 500, 10, 10 );
planegeo.materials = materials;
for(var i = 0; i <  planegeo.faces.length; i++)
{
    planegeo.faces[i].materialIndex = (i%3);
}

planegeo.dynamic = true;
this.plane = THREE.SceneUtils.createMultiMaterialObject(planegeo, materials);

但如果我使用 MeshBasicMaterial 而不是 FaceMaterial，我总是在着色器中遇到一大堆错误，或者只有一个全红色平面.我做错了什么?

But I always get either a whole bunch of errors in the shader, or only a single all-red plane if I use MeshBasicMaterial instead of FaceMaterial. What am I doing wrong?

推荐答案

要获得具有三种颜色的棋盘图案，请执行以下操作:

To get a checkerboard pattern with three colors do this:

// geometry
var geometry = new THREE.PlaneGeometry( 500, 500, 10, 10 );

// materials
var materials = [];
materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000 }) );
materials.push( new THREE.MeshBasicMaterial( { color: 0x00ff00 }) );
materials.push( new THREE.MeshBasicMaterial( { color: 0x0000ff }) );

// assign a material to each face (each face is 2 triangles)
var l = geometry.faces.length / 2;
for( var i = 0; i < l; i ++ ) {
    var j = 2 * i;
    geometry.faces[ j ].materialIndex = i % 3;
    geometry.faces[ j + 1 ].materialIndex = i % 3;
}

// mesh
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( mesh );

更新了three.js r.60

Updated for three.js r.60

这篇关于三.js - 多重材质平面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！