如何在three.js中使用挤出几何体创建的形状的每一侧应用不同的颜色

how to apply different colors to the each side of the shape created using extrude geometry in three.js

本文关键字：颜色 应用 创建 几何体 js three      更新时间：2023-09-26

我使用挤出几何体创建了一个类似墙的形状，我需要为每一侧应用不同的颜色。我使用了以下设置

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位置的材料，我需要阵列中的所有颜色都应该根据形状的侧面放置。

有人能给我指路吗？

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