1

このボックス プリミティブ エンティティを使用しており、さまざまな面にさまざまな色を表示させたいと考えています。

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

同じ色の面でキューブをレンダリングします。

4

1 に答える 1

2

設定する必要があります 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>

codepen の例を参照してください

three.js の質問を参照してください: 立方体の面の色を変更する

于 2016-08-11T06:42:32.753 に答える