Add light components for Spoke/glTF.

src/components/ambient-light.js

+AFRAME.registerComponent("ambient-light", {
+  schema: {
+    color: { type: "color" },
+    intensity: { default: 1.0 }
+  },
+
+  init() {
+    const el = this.el;
+    this.light = new THREE.AmbientLight();
+    this.el.setObject3D("ambient-light", this.light);
+    this.el.sceneEl.systems.light.registerLight(el);
+  },
+
+  update(prevData) {
+    if (this.data.color !== prevData.color) {
+      this.light.color.set(this.data.color);
+    }
+
+    if (this.data.intensity !== prevData.intensity) {
+      this.light.intensity = this.data.intensity;
+    }
+  },
+
+  remove: function() {
+    this.el.removeObject3D("ambient-light");
+  }
+});

src/components/directional-light.js

+AFRAME.registerComponent("directional-light", {
+  schema: {
+    color: { type: "color" },
+    intensity: { default: 1.0 },
+    castShadow: { default: true }
+  },
+
+  init() {
+    const el = this.el;
+    this.light = new THREE.DirectionalLight();
+    this.light.target.position.set(0, 0, 1);
+    this.el.setObject3D("directional-light", this.light);
+    this.el.sceneEl.systems.light.registerLight(el);
+  },
+
+  update(prevData) {
+    if (this.data.color !== prevData.color) {
+      this.light.color.set(this.data.color);
+    }
+
+    if (this.data.intensity !== prevData.intensity) {
+      this.light.intensity = this.data.intensity;
+    }
+
+    if (this.data.castShadow !== prevData.castShadow) {
+      this.light.castShadow = this.data.castShadow;
+    }
+  },
+
+  remove: function() {
+    this.el.removeObject3D("directional-light");
+  }
+});

src/components/hemisphere-light.js

+AFRAME.registerComponent("hemisphere-light", {
+  schema: {
+    skyColor: { type: "color" },
+    groundColor: { type: "color" },
+    intensity: { default: 1.0 }
+  },
+
+  init() {
+    const el = this.el;
+    this.light = new THREE.HemisphereLight();
+    this.el.setObject3D("hemisphere-light", this.light);
+    this.el.sceneEl.systems.light.registerLight(el);
+  },
+
+  update(prevData) {
+    if (this.data.skyColor !== prevData.skyColor) {
+      this.light.skyColor.set(this.data.skyColor);
+    }
+
+    if (this.data.groundColor !== prevData.groundColor) {
+      this.light.groundColor.set(this.data.groundColor);
+    }
+
+    if (this.data.intensity !== prevData.intensity) {
+      this.light.intensity = this.data.intensity;
+    }
+  },
+
+  remove: function() {
+    this.el.removeObject3D("hemisphere-light");
+  }
+});

src/components/point-light.js

+AFRAME.registerComponent("point-light", {
+  schema: {
+    color: { type: "color" },
+    intensity: { default: 1.0 },
+    range: { default: 0 },
+    castShadow: { default: true }
+  },
+
+  init() {
+    const el = this.el;
+    this.light = new THREE.PointLight();
+    this.light.decay = 2;
+    this.el.setObject3D("point-light", this.light);
+    this.el.sceneEl.systems.light.registerLight(el);
+  },
+
+  update(prevData) {
+    if (this.data.color !== prevData.color) {
+      this.light.color.set(this.data.color);
+    }
+
+    if (this.data.intensity !== prevData.intensity) {
+      this.light.intensity = this.data.intensity;
+    }
+
+    if (this.data.range !== prevData.range) {
+      this.light.distance = this.data.range;
+    }
+
+    if (this.data.castShadow !== prevData.castShadow) {
+      this.light.castShadow = this.data.castShadow;
+    }
+  },
+
+  remove: function() {
+    this.el.removeObject3D("point-light");
+  }
+});

src/components/spot-light.js

+AFRAME.registerComponent("spot-light", {
+  schema: {
+    color: { type: "color" },
+    intensity: { default: 1.0 },
+    range: { default: 0 },
+    innerConeAngle: { default: 0 },
+    outerConeAngle: { default: Math.PI / 4.0 },
+    castShadow: { default: true }
+  },
+
+  init() {
+    const el = this.el;
+    this.light = new THREE.SpotLight();
+    this.light.target.position.set(0, 0, 1);
+    this.light.decay = 2;
+    this.el.setObject3D("spot-light", this.light);
+    this.el.sceneEl.systems.light.registerLight(el);
+  },
+
+  update(prevData) {
+    if (this.data.color !== prevData.color) {
+      this.light.color.set(this.data.color);
+    }
+
+    if (this.data.intensity !== prevData.intensity) {
+      this.light.intensity = this.data.intensity;
+    }
+
+    if (this.data.range !== prevData.range) {
+      this.light.distance = this.data.range;
+    }
+
+    if (this.data.innerConeAngle !== prevData.innerConeAngle || this.data.outerConeAngle !== prevData.outerConeAngle) {
+      this.light.angle = this.data.outerConeAngle;
+      this.light.penumbra = 1.0 - this.data.innerConeAngle / this.data.outerConeAngle;
+    }
+
+    if (this.data.castShadow !== prevData.castShadow) {
+      this.light.castShadow = this.data.castShadow;
+    }
+  },
+
+  remove: function() {
+    this.el.removeObject3D("spot-light");
+  }
+});

src/gltf-component-mappings.js

@@ -11,9 +11,11 @@ AFRAME.GLTFModelPlus.registerComponent("gltf-model-plus", "gltf-model-plus");
 AFRAME.GLTFModelPlus.registerComponent("body", "body");
 AFRAME.GLTFModelPlus.registerComponent("hide-when-quality", "hide-when-quality");
 AFRAME.GLTFModelPlus.registerComponent("light", "light");
-AFRAME.GLTFModelPlus.registerComponent("directional-light", "light");
-AFRAME.GLTFModelPlus.registerComponent("ambient-light", "light");
-AFRAME.GLTFModelPlus.registerComponent("point-light", "light");
+AFRAME.GLTFModelPlus.registerComponent("ambient-light", "ambient-light");
+AFRAME.GLTFModelPlus.registerComponent("directional-light", "directional-light");
+AFRAME.GLTFModelPlus.registerComponent("hemisphere-light", "hemisphere-light");
+AFRAME.GLTFModelPlus.registerComponent("point-light", "point-light");
+AFRAME.GLTFModelPlus.registerComponent("spot-light", "spot-light");
 AFRAME.GLTFModelPlus.registerComponent("skybox", "skybox");
 AFRAME.GLTFModelPlus.registerComponent("layers", "layers");
 AFRAME.GLTFModelPlus.registerComponent("shadow", "shadow");

src/hub.js

@@ -75,6 +75,11 @@ import "./components/remove-networked-object-button";
 import "./components/destroy-at-extreme-distances";
 import "./components/media-loader";
 import "./components/gamma-factor";
+import "./components/ambient-light";
+import "./components/directional-light";
+import "./components/hemisphere-light";
+import "./components/point-light";
+import "./components/spot-light";
 
 import ReactDOM from "react-dom";
 import React from "react";