如何在框架中創建多色多維數據集？

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