three.js:如何为一个网格获得多个材料

three.js: How to get multiple materials working for one mesh

本文关键字：一个 网格 材料 js three      更新时间：2023-09-26

我对three.js有一个大问题:

我想要一个简单的立方体，每个面都有不同的颜色。我试过了:

// set the scene size
    var WIDTH = jQuery('#showcase').width() - 20, HEIGHT = jQuery('#showcase').height();
    // set some camera attributes
    var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000000;
    this.container = jQuery('#showcase');
    this.renderer = new THREE.WebGLRenderer();
    this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    this.scene = new THREE.Scene();
    this.scene.add(this.camera);
    // camera start position
    this.camera.position.z = this.model.radius;
    this.camera.position.y = this.model.cameraY;
    this.camera.position.x = 0;
    this.camera.lookAt(this.scene.position);
    this.renderer.setSize(WIDTH, HEIGHT);
    this.container.append(this.renderer.domElement);
    //Multiple Colors
    var materials = [new THREE.MeshBasicMaterial({
        color : 0xFF0000
    }), new THREE.MeshBasicMaterial({
        color : 0x00FF00
    }), new THREE.MeshBasicMaterial({
        color : 0x0000FF
    }), new THREE.MeshBasicMaterial({
        color : 0xAA0000
    }), new THREE.MeshBasicMaterial({
        color : 0x00AA00
    }), new THREE.MeshBasicMaterial({
        color : 0x0000AA
    })];
    this.geometry = new THREE.CubeGeometry(100, 100, 100, materials);
    this.mesh = new THREE.Mesh(this.geometry,  new THREE.MeshFaceMaterial());
    this.scene.add(this.mesh);
    // create a point light
    this.pointLight = new THREE.PointLight(0xFFFFFF);
    this.pointLight.position = this.scene.position;
    this.scene.add(this.pointLight);
    this.renderer.render(this.scene, this.camera);

但是我得到这个错误信息:"Uncaught TypeError: Cannot read property 'map' of undefined"来自three.js的第19152行。

对我来说，这似乎是webgl渲染器的问题。在我在这里和其他地方发现的大多数主题中，他们都使用画布渲染器。但我想留在webgl渲染器。

有谁知道这个问题的答案吗?非常感谢:-)

试试这个

this.geometry = new THREE.CubeGeometry(100, 100, 100);
this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial(materials));

也许可以尝试使用数组。

使用three.js 49(不知道它是否适用于57)，我使用这个代码与不同的材料的天空盒:

var axes = new THREE.AxisHelper();
scene.add( axes );
var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/himmel.jpg' ) }));
    var skyboxGeom = new THREE.CubeGeometry( 5000, 5000, 5000, 1, 1, 1, materialArray );
    var skybox = new THREE.Mesh( skyboxGeom, new THREE.MeshFaceMaterial() );
    skybox.flipSided = true;
    scene.add( skybox );

也试试，应用vertexcolors。

var geom = new THREE.BoxGeometry(20, 20, 20);
var faceIndices = ['a', 'b', 'c'];
var vertexIndex, point;
mat = new THREE.MeshBasicMaterial({
vertexColors: THREE.VertexColors
});
mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);
geom.faces.forEach(function (face) { // loop through faces
for (var i = 0; i < 3; i++) {
vertexIndex = face[ faceIndices]; 
point = geom.vertices[vertexIndex]; 
color = new THREE.Color(
point.x + 0.5, 
point.y + 0.5,
point.z + 0.5
);
face.vertexColors[ i ] = [![the output will be as in the attached picture][1]][1]color; 
}
});
相关文章：