javascript - 立方体の面の色を変更します

Question

私は実際にこの質問を見つけましたが、それはmaterial.color存在しないと言っています。描画している立方体のさまざまな面の色を変更する方法を知る必要があります。

var newCube = new THREE.Mesh(new three.CubeGeometry(size, size, size), new three.MeshNormalMaterial({ vertexColors: three.FaceColors }));

Answer 1

この回答は、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

three.js r.124

Answer 2

これは、ここで終わり、このコードが機能することを確認したい人のためのフィドルです。

私は箱を作り、顔に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

Answer 3

r.125以降のバージョンの場合

立方体の各辺は2つの三角形で構成されています。したがって、アイデアは、側面ごとに1つの（ランダムな）色を作成するために、反復ごとに6つの頂点を処理することです。

https://discourse.threejs.org/t/how-to-color-individual-faces-of-a-boxgeometry-tononindexed-object-using-vertices/30099

  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);

JSFiddle