时间戳

首页 > 解决方案 > 更改使用 face3 创建的网格的颜色

javascript - 更改使用 face3 创建的网格的颜色

问题描述

我使用面 3 和三个 js 创建了一个网格。但是所需的颜色没有反映在网格上。这是我使用的代码。

var geometry = new THREE.Geometry();
var f = 0;
for (var i = 0; i < data.real.length; i++, f += 4) {
    var o2 = i == data.real.length - 1 ? 0 : i + 1;
    var tl = data.real[i];
    var tr = data.real[o2];
    var bl = data.zeroAxis[i];
    var br = data.zeroAxis[o2];

    geometry.vertices.push(tl, tr, br, bl);
    geometry.faces.push(new THREE.Face3(f, f + 1, f + 2));
    face.materials = [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ];

    geometry.faces.push(new THREE.Face3(f, f + 3, f + 2));
}
var material = new THREE.MeshPhongMaterial({
    color : new THREE.Color(0x008000),
    side : THREE.DoubleSide,
    transparent : true,
    opacity : 0.5
});
var object = new THREE.Mesh(geometry, material);
object.position.set(0, 0, 0);
this.plot = object;
this.tb.scene.add(object);
this.tb.render();

标签： javascripthtmlthree.js

解决方案

以下行不正确：

face.materials = [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ];

如果您想为每张脸应用颜色，请这样做：

var faces = geometry.faces;

for ( var i = 0, l = faces.length; i < l; i ++ ) {

    var face = faces[ i ];
    face.color = new THREE.Color( Math.random() * 0xffffff );

}

同时将vertexColors相应材质的属性设置为THREE.FaceColors。查看以下现场演示，查看完整示例：https ://jsfiddle.net/f2Lommf5/8539/

推荐阅读