如何将不同颜色应用于使用three.js中的拉伸几何体创建的形状的每一侧

时间:2014-09-12 09:26:49

标签: javascript three.js

我使用拉伸几何创建了一个类似于墙的形状,我需要为每个侧面应用不同的颜色我使用了以下设置

var extrusionSettings = {
        curveSegments:5,
        steps: 10,
        amount: 200,
        bevelEnabled: true,
        bevelThickness: default_height,
        bevelSize: 0,
        bevelSegments: 8,
        material: 0,
        extrudeMaterial: 5
    };

var geometry1 = new THREE.ExtrudeGeometry( shape1, extrusionSettings );

var materialLeft = new THREE.MeshLambertMaterial({
    color: 0xd6d6d6,// cement   
    //transparent:true,
    side: THREE.DoubleSide,
    ambient: 0xd6d6d6
});
var materialRight = new THREE.MeshLambertMaterial({
    color: 0xd6d6d6,//violet    
    //transparent:true,
    side: THREE.DoubleSide,
    ambient: 0xcc49c3
});
var materialTop = new THREE.MeshLambertMaterial({
    color: 0x8649cc,//blue  
    //transparent:true,
    side: THREE.DoubleSide,
    ambient: 0x8649cc
});
var materialBottom = new THREE.MeshLambertMaterial({
    color: 0x4ac4b6,// green
    //transparent:true,
    side: THREE.DoubleSide,
    ambient: 0x4ac4b6
});
var materialFront = new THREE.MeshLambertMaterial({
    color: 0x567E14,// dark green
    //transparent:true,
    side: THREE.DoubleSide,
    ambient: 0x567E14
});
var materialSide = new THREE.MeshLambertMaterial({
    color: 0xa8a843,// yellow
    //transparent:true,
    side: THREE.DoubleSide,
    ambient: 0xa8a843
});

//var materials = [ materialFront, materialSide ];
var materials = [
                      materialLeft, // Left side 
                      materialRight, // Right side 
                      materialTop,   // Top side    
                      materialBottom,// Bottom side 
                      materialFront, // Front side 
                      materialSide, // Back side                                 
                    ];

var material = new THREE.MeshFaceMaterial( materials );

var mesh1 = new THREE.Mesh( geometry1, material );

通过使用material: 0,extrudeMaterial: 5,它采用材料数组中0和5位置的材料,我需要根据形状的一侧放置数组中的所有颜色。

任何人都可以指导我。

1 个答案:

答案 0 :(得分:0)

for (var i = 0, l = geometry1.faces.length; i < l; i++) {
    geometry1.faces[i].materialIndex = i % l;
}