如何在框架中创建多彩多姿的立方体？

Question

我正在使用这个盒子原始实体，我想让它的各个面显示不同的颜色。

<a-entity id="box" geometry="primitive: box; width: 1; height: 1; depth: 1" position="2 1 0" rotation="0 30 0" multicolored-cube>

这是我正在使用的组件 -

<script>
    AFRAME.registerComponent('multicolored-cube', {
        init: function() {
            var mesh = this.el.getObject3D('mesh');
            var geom = mesh.geometry;
            for (var i = 0; i < geom.faces.length; i++) {
                var face = geom.faces[i];
                face.color.setHex(Math.random() * 0xffffff);
            }
            this.el.setObject3D('mesh', mesh);
        }
    });
</script>

它仍然用相同颜色的面渲染立方体。

Answer 1

我们需要设置mesh.material.vertexColors = THREE.FaceColors;

AFRAME.registerComponent('multicolored-cube', {
  dependencies: ['geometry'],
  init: function() {
    var mesh = this.el.getObject3D('mesh');
    var geom = mesh.geometry;
    for (var i = 0; i < geom.faces.length; i++) {
      var face = geom.faces[i]; 
      face.color.setRGB(Math.random(), Math.random(), Math.random());
    }
    geom.colorsNeedUpdate = true;
    mesh.material.vertexColors = THREE.FaceColors;
  }
});

<a-scene>
  <a-entity geometry="primitive: box; buffer: false" 
            multicolored-cube position="0 1 -4" rotation="0 45 0"></a-entity>
</a-scene>

See example in codepen

See three.js question: Change the colors of a cube's faces