add RectAreaLight

src/lights/RectAreaLight.js

@@ -0,0 +1,27 @@
+import { RectAreaLight } from 'three';
+import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.js';
+import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';
+import { watch } from 'vue';
+import Light from './Light.js';
+
+export default {
+  extends: Light,
+  props: {
+    width: { type: Number, default: 10 },
+    height: { type: Number, default: 10 },
+  },
+  created() {
+    RectAreaLightUniformsLib.init();
+    this.light = new RectAreaLight(this.color, this.intensity, this.width, this.height);
+
+    ['width', 'height'].forEach(p => {
+      watch(() => this[p], () => {
+        this.light[p] = this[p];
+      });
+    });
+
+    this.$parent.add(new RectAreaLightHelper(this.light));
+    this.initLight();
+  },
+  __hmrId: 'RectAreaLight',
+};

src/lights/index.js

@@ -1,4 +1,5 @@
 export { default as AmbientLight } from './AmbientLight.js';
 export { default as DirectionalLight } from './DirectionalLight.js';
 export { default as PointLight } from './PointLight.js';
+export { default as RectAreaLight } from './RectAreaLight.js';
 export { default as SpotLight } from './SpotLight.js';

src/plugin.js

@@ -30,6 +30,7 @@ export const TroisJSVuePlugin = {
       'AmbientLight',
       'DirectionalLight',
       'PointLight',
+      'RectAreaLight',
       'SpotLight',
 
       'BasicMaterial',