javascript 三.js：如何让多种材质适用于一个网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15759447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
three.js: How to get multiple materials working for one mesh
提问by user2235189
I have a big problem with three.js:
我对three.js有一个大问题：
I want a simple cube with a different color on each face. I have tried this way:
我想要一个简单的立方体，每个面上都有不同的颜色。我试过这种方式：
// 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);
But I get this error message: "Uncaught TypeError: Cannot read property 'map' of undefined" from line 19152 in three.js.
但我收到此错误消息：“未捕获的类型错误：无法读取未定义的属性‘地图’”来自three.js 的第 19152 行。
To me it seems to be a problem of the webgl renderer. In most topics I have found here and somewhere else, they were using the canvas renderer. But I want to stay with the webgl renderer.
对我来说，这似乎是 webgl 渲染器的问题。在我在这里和其他地方找到的大多数主题中，他们使用的是画布渲染器。但我想继续使用 webgl 渲染器。
Does anyone know something about this problem? Thanks a lot:-)
有人知道这个问题吗？非常感谢：-）
回答by samulisoderlund
Try this
试试这个
this.geometry = new THREE.CubeGeometry(100, 100, 100);
this.mesh = new THREE.Mesh(this.geometry, new THREE.MeshFaceMaterial(materials));
回答by Larkis
maybe try to work with an array.
也许尝试使用数组。
With three.js 49 (dont of if it works with 57) i used this code for a skybox with different 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 );
回答by Aasha joney
Try this also, applying the 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;
}
});
