wip

src/core/Renderer.js

@@ -38,15 +38,18 @@ export default {
     width: String,
     height: String,
   },
-  setup(props) {
+  setup() {
     return {
       three: useThree(),
       raf: true,
+      onMountedCallbacks: [],
     };
   },
   provide() {
     return {
       three: this.three,
+      // renderer: this.three.renderer,
+      rendererComponent: this,
     };
   },
   mounted() {
@@ -68,12 +71,17 @@ export default {
       if (this.three.composer) this.animateC();
       else this.animate();
     };
+
+    this.onMountedCallbacks.forEach(c => c());
   },
   beforeUnmount() {
     this.raf = false;
     this.three.dispose();
   },
   methods: {
+    onMounted(callback) {
+      this.onMountedCallbacks.push(callback);
+    },
     onBeforeRender(callback) {
       this.three.onBeforeRender(callback);
     },

src/core/Scene.js

@@ -7,7 +7,7 @@ export default {
     id: String,
     background: [String, Number],
   },
-  setup (props) {
+  setup(props) {
     const scene = new Scene();
     if (props.background) scene.background = new Color(props.background);
     watch(() => props.background, (value) => { scene.background = new Color(value); });
@@ -23,6 +23,14 @@ export default {
       this.three.scene = this.scene;
     }
   },
+  methods: {
+    // add(o) {
+    //   this.scene.add(o);
+    // },
+    // remove(o) {
+    //   this.scene.remove(o);
+    // },
+  },
   render() {
     if (this.$slots.default) {
       return this.$slots.default();

src/meshes/Gem.js

@@ -17,13 +17,15 @@ export default {
     cubeRTSize: { type: Number, default: 512 },
     cubeCameraNear: { type: Number, default: 0.1 },
     cubeCameraFar: { type: Number, default: 2000 },
+    cubeRTAutoUpdate: Boolean,
   },
   mounted() {
     this.initGem();
-    this.three.onBeforeRender(this.updateCubeRT);
+    if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT);
+    else this.rendererComponent.onMounted(this.updateCubeRT);
   },
   unmounted() {
-    this.three.offBeforeRender(this.upateCubeRT);
+    this.three.offBeforeRender(this.updateCubeRT);
   },
   methods: {
     initGem() {

src/meshes/Mesh.js

@@ -3,7 +3,7 @@ import { watch } from 'vue';
 import useBindProp from '../use/useBindProp.js';
 
 export default {
-  inject: ['three', 'scene'],
+  inject: ['three', 'scene', 'rendererComponent'],
   emits: ['ready'],
   props: {
     materialId: String,

src/meshes/MirrorMesh.js

@@ -14,13 +14,15 @@ export default {
     cubeRTSize: { type: Number, default: 512 },
     cubeCameraNear: { type: Number, default: 0.1 },
     cubeCameraFar: { type: Number, default: 2000 },
+    cubeRTAutoUpdate: Boolean,
   },
   mounted() {
     this.initMirrorMesh();
-    this.three.onBeforeRender(this.upateCubeRT);
+    if (this.cubeRTAutoUpdate) this.three.onBeforeRender(this.updateCubeRT);
+    else this.rendererComponent.onMounted(this.updateCubeRT);
   },
   unmounted() {
-    this.three.offBeforeRender(this.upateCubeRT);
+    this.three.offBeforeRender(this.updateCubeRT);
   },
   methods: {
     initMirrorMesh() {
@@ -32,11 +34,10 @@ export default {
       this.material.envMap = cubeRT.texture;
       this.material.needsUpdate = true;
     },
-    upateCubeRT() {
+    updateCubeRT() {
       this.mesh.visible = false;
       this.cubeCamera.update(this.three.renderer, this.scene);
       this.mesh.visible = true;
-      console.log('upateCubeRT');
     },
   },
   __hmrId: 'MirrorMesh',