wip

src/core/useThree.js

@@ -166,6 +166,7 @@ export default function useThree() {
       obj.mouse_move_element.removeEventListener('mouseleave', onMouseleave);
     }
     if (obj.orbitCtrl) obj.orbitCtrl.dispose();
+    this.renderer.dispose();
   }
 
   /**

src/lights/DirectionalLight.js

@@ -0,0 +1,9 @@
+import { DirectionalLight } from 'three';
+import Light from './Light.js';
+
+export default {
+  extends: Light,
+  created() {
+    this.light = new DirectionalLight(this.color, this.intensity);
+  },
+};

src/lights/index.js

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

src/meshes/Image.js

@@ -0,0 +1,25 @@
+import { DoubleSide, MeshBasicMaterial, PlaneBufferGeometry, TextureLoader } from 'three';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    src: String,
+    width: {
+      type: Number,
+      default: 1,
+    },
+    height: {
+      type: Number,
+      default: 1,
+    },
+  },
+  created() {
+    this.geometry = new PlaneBufferGeometry(this.width, this.height, 1, 1);
+    this.material = new MeshBasicMaterial({ map: new TextureLoader().load(this.src), side: DoubleSide });
+  },
+  unmounted() {
+    // this material is not mounted, it won't be auto dispose
+    this.material.dispose();
+  },
+};

src/meshes/InstancedMesh.js

@@ -4,7 +4,7 @@ import { setFromProp } from '../tools.js';
 export default {
   inject: ['three', 'scene'],
   props: {
-    material: String,
+    materialId: String,
     count: Number,
     position: Object,
     castShadow: {
@@ -32,7 +32,7 @@ export default {
     }
   },
   mounted() {
-    this.mesh = new InstancedMesh(this.conf.geometry, this.three.materials[this.material], this.count);
+    this.mesh = new InstancedMesh(this.conf.geometry, this.three.materials[this.materialId], this.count);
     setFromProp(this.mesh.position, this.position);
     this.mesh.castShadow = this.castShadow;
     this.mesh.receiveShadow = this.receiveShadow;

src/meshes/Mesh.js

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import { Mesh } from 'three';
 import { setFromProp } from '../tools.js';
 
@@ -5,7 +6,7 @@ export default {
   inject: ['three', 'scene'],
   emits: ['ready'],
   props: {
-    material: String,
+    materialId: String,
     position: Object,
     rotation: Object,
     scale: Object,
@@ -26,14 +27,29 @@ export default {
   },
   methods: {
     initMesh() {
-      this.mesh = new Mesh(this.geometry, this.three.materials[this.material]);
+      if (!this.material && this.materialId) {
+        this.material = this.three.materials[this.materialId];
+      }
+      this.mesh = new Mesh(this.geometry, this.material);
+      this.updateMesh();
+      this.scene.add(this.mesh);
+
+      this.addWatchers();
+      this.$emit('ready');
+    },
+    addWatchers() {
+      ['position', 'rotation', 'scale'].forEach(p => {
+        watch(() => this[p], () => {
+          setFromProp(this.mesh[p], this[p]);
+        }, { deep: true });
+      });
+    },
+    updateMesh() {
       setFromProp(this.mesh.position, this.position);
       setFromProp(this.mesh.rotation, this.rotation);
       setFromProp(this.mesh.scale, this.scale);
       this.mesh.castShadow = this.castShadow;
       this.mesh.receiveShadow = this.receiveShadow;
-      this.scene.add(this.mesh);
-      this.$emit('ready');
     },
   },
   render() {

src/meshes/index.js

@@ -1,4 +1,5 @@
 export { default as Box } from './Box.js';
+export { default as Image } from './Image.js';
 export { default as Plane } from './Plane.js';
 export { default as Sphere } from './Sphere.js';
 export { default as Text } from './Text.js';

src/plugin.js

@@ -12,6 +12,7 @@ export const TroisJSVuePlugin = {
       'SphereGeometry',
 
       'AmbientLight',
+      'DirectionalLight',
       'PointLight',
       'SpotLight',
 
@@ -24,11 +25,13 @@ export const TroisJSVuePlugin = {
       'SubSurfaceMaterial',
 
       'Box',
-      'InstancedMesh',
+      'Image',
       'Plane',
       'Sphere',
       'Text',
 
+      'InstancedMesh',
+
       'BokehPass',
       'EffectComposer',
       'RenderPass',