wip

src/core/Group.js

@@ -1,5 +1,5 @@
 import { Group } from 'three';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   inject: {
@@ -18,23 +18,30 @@ export default {
     };
   },
   created() {
+    if (!this.$parent) {
+      console.error('Missing parent');
+    } else if (!this.$parent.add || !this.$parent.remove) {
+
+    }
+
     this.parent = this.group ? this.group : this.scene;
 
     this.group = new Group();
-    useBindProp(this, 'position', this.group.position);
+    bindProp(this, 'position', this.group.position);
-    useBindProp(this, 'rotation', this.group.rotation);
+    bindProp(this, 'rotation', this.group.rotation);
-    useBindProp(this, 'scale', this.group.scale);
+    bindProp(this, 'scale', this.group.scale);
 
     this.parent.add(this.group);
   },
   unmounted() {
-    this.parent.remove(this.group);
+    if (this.$parent) this.$parent.remove(this.group);
+  },
+  methods: {
+    add(o) { this.group.add(o); },
+    remove(o) { this.group.remove(o); },
   },
   render() {
-    if (this.$slots.default) {
+    return this.$slots.default ? this.$slots.default() : [];
-      return this.$slots.default();
-    }
-    return [];
   },
   __hmrId: 'Group',
 };

src/core/OrthographicCamera.js

@@ -1,6 +1,6 @@
 import { OrthographicCamera, Vector3 } from 'three';
 import { watch } from 'vue';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   inject: ['three'],
@@ -16,7 +16,7 @@ export default {
   },
   created() {
     this.camera = new OrthographicCamera(this.left, this.right, this.top, this.bottom, this.near, this.far);
-    useBindProp(this, 'position', this.camera.position);
+    bindProp(this, 'position', this.camera.position);
 
     ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom'].forEach(p => {
       watch(() => this[p], () => {

src/core/PerspectiveCamera.js

@@ -1,6 +1,6 @@
 import { PerspectiveCamera, Vector3 } from 'three';
 import { watch } from 'vue';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   inject: ['three'],
@@ -14,7 +14,7 @@ export default {
   },
   created() {
     this.camera = new PerspectiveCamera(this.fov, this.aspect, this.near, this.far);
-    useBindProp(this, 'position', this.camera.position);
+    bindProp(this, 'position', this.camera.position);
 
     if (this.lookAt) this.camera.lookAt(this.lookAt.x, this.lookAt.y, this.lookAt.z);
     watch(() => this.lookAt, (v) => { this.camera.lookAt(v.x, v.y, v.z); }, { deep: true });

src/core/Renderer.js

@@ -47,7 +47,8 @@ export default {
     };
 
     if (this.three.init(params)) {
-      this.three.renderer.shadowMap.enabled = this.shadow;
+      this.renderer = this.three.renderer;
+      this.renderer.shadowMap.enabled = this.shadow;
       if (this.three.composer) this.animateC();
       else this.animate();
     };

src/core/Scene.js

@@ -24,12 +24,8 @@ export default {
     }
   },
   methods: {
-    // add(o) {
+    add(o) { this.scene.add(o); },
-    //   this.scene.add(o);
+    remove(o) { this.scene.remove(o); },
-    // },
-    // remove(o) {
-    //   this.scene.remove(o);
-    // },
   },
   render() {
     if (this.$slots.default) {

src/effects/TiltShiftPass.js

@@ -3,7 +3,7 @@ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { watch } from 'vue';
 import EffectPass from './EffectPass.js';
 import TiltShift from '../shaders/TiltShift.js';
-import useBindPropValue from '../use/useBindPropValue.js';
+import { bindPropValue } from '../tools.js';
 
 export default {
   extends: EffectPass,
@@ -28,8 +28,8 @@ export default {
     uniforms1.end = uniforms.end;
     uniforms1.texSize = uniforms.texSize;
 
-    useBindPropValue(this, 'blurRadius', uniforms.blurRadius);
+    bindPropValue(this, 'blurRadius', uniforms.blurRadius);
-    useBindPropValue(this, 'gradientRadius', uniforms.gradientRadius);
+    bindPropValue(this, 'gradientRadius', uniforms.gradientRadius);
 
     this.updateFocusLine();
     ['start', 'end'].forEach(p => {

src/effects/ZoomBlurPass.js

@@ -1,8 +1,7 @@
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import EffectPass from './EffectPass.js';
 import ZoomBlur from '../shaders/ZoomBlur.js';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp, bindPropValue } from '../tools.js';
-import useBindPropValue from '../use/useBindPropValue.js';
 
 export default {
   extends: EffectPass,
@@ -15,8 +14,8 @@ export default {
     this.passes.push(this.pass);
 
     const uniforms = this.uniforms = this.pass.uniforms;
-    useBindProp(this, 'center', uniforms.center.value);
+    bindProp(this, 'center', uniforms.center.value);
-    useBindPropValue(this, 'strength', uniforms.strength);
+    bindPropValue(this, 'strength', uniforms.strength);
   },
   __hmrId: 'ZoomBlurPass',
 };

src/lights/Light.js

@@ -1,7 +1,7 @@
 import { Color } from 'three';
 import { watch } from 'vue';
 import { setFromProp } from '../tools.js';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   inject: {
@@ -30,10 +30,10 @@ export default {
     this.parent = this.group ? this.group : this.scene;
   },
   mounted() {
-    useBindProp(this, 'position', this.light.position);
+    bindProp(this, 'position', this.light.position);
 
     if (this.light.target) {
-      useBindProp(this, 'target', this.light.target.position);
+      bindProp(this, 'target', this.light.target.position);
     }
 
     if (this.light.shadow) {

src/materials/StandardMaterial.js

@@ -1,7 +1,7 @@
 import { MeshStandardMaterial, Vector2 } from 'three';
 import { watch } from 'vue';
 import { propsValues } from '../tools.js';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 import Material from './Material';
 
 const props = {
@@ -39,7 +39,7 @@ export default {
           }
         });
       });
-      useBindProp(this, 'normalScale', this.material.normalScale);
+      bindProp(this, 'normalScale', this.material.normalScale);
     },
   },
   __hmrId: 'StandardMaterial',

src/meshes/Gem.js

@@ -9,7 +9,7 @@ import {
 } from 'three';
 // import { watch } from 'vue';
 import Mesh from '../meshes/Mesh.js';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   extends: Mesh,
@@ -33,7 +33,7 @@ export default {
     initGem() {
       const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
       this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
-      useBindProp(this, 'position', this.cubeCamera.position);
+      bindProp(this, 'position', this.cubeCamera.position);
       this.parent.add(this.cubeCamera);
 
       this.material.side = FrontSide;
@@ -55,9 +55,9 @@ export default {
 
       this.meshBack = new TMesh(this.geometry, this.materialBack);
 
-      useBindProp(this, 'position', this.meshBack.position);
+      bindProp(this, 'position', this.meshBack.position);
-      useBindProp(this, 'rotation', this.meshBack.rotation);
+      bindProp(this, 'rotation', this.meshBack.rotation);
-      useBindProp(this, 'scale', this.meshBack.scale);
+      bindProp(this, 'scale', this.meshBack.scale);
       this.parent.add(this.meshBack);
     },
     updateCubeRT() {

src/meshes/InstancedMesh.js

@@ -1,6 +1,6 @@
 import { InstancedMesh } from 'three';
 import { watch } from 'vue';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   inject: {
@@ -42,9 +42,9 @@ export default {
 
       this.mesh = new InstancedMesh(this.geometry, this.material, this.count);
 
-      useBindProp(this, 'position', this.mesh.position);
+      bindProp(this, 'position', this.mesh.position);
-      useBindProp(this, 'rotation', this.mesh.rotation);
+      bindProp(this, 'rotation', this.mesh.rotation);
-      useBindProp(this, 'scale', this.mesh.scale);
+      bindProp(this, 'scale', this.mesh.scale);
 
       ['castShadow', 'receiveShadow'].forEach(p => {
         this.mesh[p] = this[p];

src/meshes/Mesh.js

@@ -1,6 +1,6 @@
 import { Mesh } from 'three';
 import { watch } from 'vue';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   inject: {
@@ -63,9 +63,9 @@ export default {
       this.$emit('ready');
     },
     bindProps() {
-      useBindProp(this, 'position', this.mesh.position);
+      bindProp(this, 'position', this.mesh.position);
-      useBindProp(this, 'rotation', this.mesh.rotation);
+      bindProp(this, 'rotation', this.mesh.rotation);
-      useBindProp(this, 'scale', this.mesh.scale);
+      bindProp(this, 'scale', this.mesh.scale);
 
       ['castShadow', 'receiveShadow'].forEach(p => {
         this.mesh[p] = this[p];

src/meshes/MirrorMesh.js

@@ -6,7 +6,7 @@ import {
 } from 'three';
 // import { watch } from 'vue';
 import Mesh from './Mesh.js';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   extends: Mesh,

src/meshes/RefractionMesh.js

@@ -7,7 +7,7 @@ import {
 } from 'three';
 // import { watch } from 'vue';
 import Mesh from './Mesh.js';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   extends: Mesh,
@@ -31,7 +31,7 @@ export default {
     initMirrorMesh() {
       const cubeRT = new WebGLCubeRenderTarget(this.cubeRTSize, { mapping: CubeRefractionMapping, format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter });
       this.cubeCamera = new CubeCamera(this.cubeCameraNear, this.cubeCameraFar, cubeRT);
-      useBindProp(this, 'position', this.cubeCamera.position);
+      bindProp(this, 'position', this.cubeCamera.position);
       this.parent.add(this.cubeCamera);
 
       this.material.envMap = cubeRT.texture;

src/meshes/Sprite.js

@@ -1,5 +1,5 @@
 import { Sprite, SpriteMaterial, TextureLoader } from 'three';
-import useBindProp from '../use/useBindProp.js';
+import { bindProp } from '../tools.js';
 
 export default {
   emits: ['ready', 'loaded'],
@@ -21,8 +21,8 @@ export default {
     this.material = new SpriteMaterial({ map: this.texture });
     this.sprite = new Sprite(this.material);
     this.geometry = this.sprite.geometry;
-    useBindProp(this, 'position', this.sprite.position);
+    bindProp(this, 'position', this.sprite.position);
-    useBindProp(this, 'scale', this.sprite.scale);
+    bindProp(this, 'scale', this.sprite.scale);
 
     this.parent.add(this.sprite);
     this.$emit('ready');

src/plugin.js

@@ -1,3 +1,4 @@
+import { createApp as _createApp } from 'vue';
 import * as TROIS from './index.js';
 
 export const TroisJSVuePlugin = {
@@ -90,3 +91,7 @@ export const TroisJSVuePlugin = {
     });
   },
 };
+
+export function createApp(params) {
+  return _createApp(params).use(TroisJSVuePlugin);
+};

src/tools.js

@@ -1,3 +1,5 @@
+import { toRef, watch } from 'vue';
+
 export function setFromProp(o, prop) {
   if (prop instanceof Object) {
     Object.entries(prop).forEach(([key, value]) => {
@@ -6,6 +8,21 @@ export function setFromProp(o, prop) {
   }
 };
 
+export function bindProp(comp, prop, object) {
+  const ref = toRef(comp, prop);
+  setFromProp(object, ref.value);
+  watch(ref, () => {
+    setFromProp(object, ref.value);
+  }, { deep: true });
+};
+
+export function bindPropValue(src, srcProp, dst, dstProp = 'value') {
+  dst[dstProp] = src[srcProp];
+  watch(() => src[srcProp], (value) => {
+    dst[dstProp] = value;
+  });
+};
+
 export function propsValues(props, exclude) {
   const values = {};
   Object.entries(props).forEach(([key, value]) => {

src/use/useBindProp.js

@@ -1,12 +0,0 @@
-import { toRef, watch } from 'vue';
-import { setFromProp } from '../tools.js';
-
-export default function useBindProp(comp, prop, object) {
-  if (comp[prop]) {
-    const ref = toRef(comp, prop);
-    setFromProp(object, ref.value);
-    watch(ref, () => {
-      setFromProp(object, ref.value);
-    }, { deep: true });
-  }
-};

src/use/useBindPropValue.js

@@ -1,10 +0,0 @@
-import { watch } from 'vue';
-
-export default function useBindPropValue(src, srcProp, dst, dstProp = 'value') {
-  if (src[srcProp]) {
-    dst[dstProp] = src[srcProp];
-    watch(() => src[srcProp], (value) => {
-      dst[dstProp] = value;
-    });
-  }
-};