我实际上发现了这个问题,但它说不material.color
存在。我需要知道如何更改我正在绘制的立方体的各个面的颜色:
var newCube = new THREE.Mesh(new three.CubeGeometry(size, size, size), new three.MeshNormalMaterial({ vertexColors: three.FaceColors }));
此答案仅适用于 r.125 之前的 three.js 版本。
以下是设置和更改立方体面颜色的方法:
var geometry = new THREE.BoxGeometry( size, size, size );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true } );
如果在渲染几何图形后geometry.faces[i].color
更改,则必须设置.geometry.colorsNeedUpdate = true
三.js r.124
对于最终来到这里并希望看到此代码正常工作的人来说,这是一个小提琴。
我做了一个盒子,在脸上系了 3 种颜色:
// colors
red = new THREE.Color(1, 0, 0);
green = new THREE.Color(0, 1, 0);
blue = new THREE.Color(0, 0, 1);
var colors = [red, green, blue];
for (var i = 0; i < 3; i++) {
geometry.faces[4 * i].color = colors[i];
geometry.faces[4 * i + 1].color = colors[i];
geometry.faces[4 * i + 2].color = colors[i];
geometry.faces[4 * i + 3].color = colors[i];
}
面部颜色在animate
循环中更改。
还可以在此处查看相关问题,其中有一个很好的答案THREE.BufferGeometry
,展示了在实例上使用材料索引和组。
对于大于 r.125 的版本
立方体的每一面都由两个三角形组成。所以这个想法是每次迭代处理六个顶点,以便每边创建一个(随机)颜色。
const piece = new THREE.BoxGeometry(1, 1, 1).toNonIndexed();
const material = new THREE.MeshBasicMaterial({
vertexColors: true
});
const positionAttribute = piece.getAttribute('position');
const colors = [];
const color = new THREE.Color();
for (let i = 0; i < positionAttribute.count; i += 6) {
color.setHex(0xffffff * Math.random());
colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b);
} // for
// define the new attribute
piece.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
cube = new THREE.Mesh(piece, material);