vertexColors is now a boolean (since THREE.js r114 / A-Frame 1.1.0)

docs/components/material.md

@@ -70,7 +70,7 @@ depending on the material type applied.
 | shader       | Which material to use. Defaults to the [standard material][standard]. Can be set to the [flat material][flat] or to a registered custom shader material. | standard      |
 | side         | Which sides of the mesh to render. Can be one of `front`, `back`, or `double`.                                                                    | front         |
 | transparent  | Whether material is transparent. Transparent entities are rendered after non-transparent entities.                                                | false         |
-| vertexColors | Whether to use vertex or face colors to shade the material. Can be one of `none`, `vertex`, or `face`.                                            | none          |
+| vertexColorsEnabled | Whether to use vertex colors to shade the material.                                             | false        |
 | visible      | Whether material is visible. Raycasters will ignore invisible materials.                                                                          | true          |
 | blending     | The blending mode for the material's RGB and Alpha sent to the WebGLRenderer. Can be one of `none`, `normal`, `additive`, `subtractive` or `multiply`.  | normal          |
 | dithering    | Whether material is dithered with noise. Removes banding from gradients like ones produced by lighting.                                           | true          |

src/components/material.js

@@ -29,7 +29,7 @@ module.exports.Component = registerComponent('material', {
     shader: {default: 'standard', oneOf: shaderNames, schemaChange: true},
     side: {default: 'front', oneOf: ['front', 'back', 'double']},
     transparent: {default: false},
-    vertexColors: {type: 'string', default: 'none', oneOf: ['face', 'vertex']},
+    vertexColorsEnabled: {default: false},
     visible: {default: true},
     blending: {default: 'normal', oneOf: ['none', 'normal', 'additive', 'subtractive', 'multiply']},
     dithering: {default: true}
@@ -135,7 +135,7 @@ module.exports.Component = registerComponent('material', {
     material.flatShading = data.flatShading;
     material.side = parseSide(data.side);
     material.transparent = data.transparent !== false || data.opacity < 1.0;
-    material.vertexColors = parseVertexColors(data.vertexColors);
+    material.vertexColors = data.vertexColorsEnabled;
     material.visible = data.visible;
     material.blending = parseBlending(data.blending);
     material.dithering = data.dithering;
@@ -145,7 +145,7 @@ module.exports.Component = registerComponent('material', {
     if (oldDataHasKeys &&
         (oldData.alphaTest !== data.alphaTest ||
          oldData.side !== data.side ||
-         oldData.vertexColors !== data.vertexColors)) {
+         oldData.vertexColorsEnabled !== data.vertexColorsEnabled)) {
       material.needsUpdate = true;
     }
   },
@@ -216,23 +216,6 @@ function parseSide (side) {
   }
 }
 
-/**
- * Return a three.js constant determining vertex coloring.
- */
-function parseVertexColors (coloring) {
-  switch (coloring) {
-    case 'face': {
-      return THREE.FaceColors;
-    }
-    case 'vertex': {
-      return THREE.VertexColors;
-    }
-    default: {
-      return THREE.NoColors;
-    }
-  }
-}
-
 /**
  * Return a three.js constant determining blending
  *

tests/components/material.test.js

@@ -298,23 +298,16 @@ suite('material', function () {
     });
   });
 
-  suite('vertexColor', function () {
+  suite('vertexColors', function () {
     test('defaults to no color', function () {
-      assert.equal(el.getAttribute('material').vertexColors, 'none');
-      assert.equal(el.components.material.material.vertexColors, THREE.NoColors);
+      assert.equal(el.getAttribute('material').vertexColorsEnabled, false);
+      assert.equal(el.components.material.material.vertexColors, false);
     });
 
-    test('can set to vertex color', function () {
+    test('can set vertex colors using vertexColorsEnabled property', function () {
       var oldMaterialVersion = el.getObject3D('mesh').material.version;
-      el.setAttribute('material', 'vertexColors', 'vertex');
-      assert.equal(el.components.material.material.vertexColors, THREE.VertexColors);
-      assert.equal(el.components.material.material.version, oldMaterialVersion + 2);
-    });
-
-    test('can set to face color', function () {
-      var oldMaterialVersion = el.getObject3D('mesh').material.version;
-      el.setAttribute('material', 'vertexColors', 'face');
-      assert.equal(el.components.material.material.vertexColors, THREE.FaceColors);
+      el.setAttribute('material', 'vertexColorsEnabled', true);
+      assert.equal(el.components.material.material.vertexColors, true);
       assert.equal(el.components.material.material.version, oldMaterialVersion + 2);
     });
   });

tests/components/sound.test.js

@@ -7,8 +7,6 @@ suite('sound', function () {
     var el = this.el = entityFactory();
     THREE.Cache.files = {};
     setTimeout(() => {
-      el.sceneEl.addEventListener('loaded', function () { done(); });
-
       el.setAttribute('sound', {
         autoplay: true,
         src: 'url(mysoundfile.mp3)',
@@ -19,6 +17,9 @@ suite('sound', function () {
         rolloffFactor: 4,
         poolSize: 3
       });
+
+      if (el.sceneEl.hasLoaded) { done(); }
+      el.sceneEl.addEventListener('loaded', function () { done(); });
     });
   });