wip

src/components/Test4.vue

@@ -1,18 +1,29 @@
 <template>
   <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
-    <Camera :position="{ z: 200 }"></Camera>
+    <Camera :position="{ z: 250 }"></Camera>
     <BasicMaterial id="material"></BasicMaterial>
     <Scene>
       <Text
-        text="TEST"
+        ref="text"
+        text="TroisJS"
         font-src="helvetiker_regular.typeface.json"
         material="material"
         align="center"
+        @ready="anim"
       ></Text>
     </Scene>
   </Renderer>
 </template>
 
 <script>
-export default {};
+export default {
+  methods: {
+    anim() {
+      console.log('anim');
+      this.$refs.renderer.onBeforeRender(() => {
+        this.$refs.text.mesh.rotation.x += 0.01;
+      });
+    },
+  },
+};
 </script>

src/core/useThree.js

@@ -159,11 +159,13 @@ export default function useThree() {
    * remove listeners
    */
   function dispose() {
+    beforeRenderHandlers.splice(0);
     window.removeEventListener('resize', onResize);
     if (obj.mouse_move_element) {
       obj.mouse_move_element.removeEventListener('mousemove', onMousemove);
       obj.mouse_move_element.removeEventListener('mouseleave', onMouseleave);
     }
+    if (obj.orbitCtrl) obj.orbitCtrl.dispose();
   }
 
   /**

src/export.js

@@ -0,0 +1,2 @@
+export * from './index.js';
+export * from './plugin.js';

src/index.js

@@ -3,6 +3,6 @@ export * from './geometries/index.js';
 export * from './lights/index.js';
 export * from './materials/index.js';
 export * from './meshes/index.js';
-export * from './tools.js';
-
 export * from './effects/index.js';
+
+export * from './tools.js';

src/main.js

@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
+import { TroisJSVuePlugin } from './plugin.js';
 import App from './App.vue';
-import TroisJSPlugin from './plugin.js';
 import './index.css';
 
 const app = createApp(App);
-app.use(TroisJSPlugin);
+app.use(TroisJSVuePlugin);
 app.mount('#app');

src/meshes/Mesh.js

@@ -3,6 +3,7 @@ import { setFromProp } from '../tools.js';
 
 export default {
   inject: ['three', 'scene'],
+  emits: ['ready'],
   props: {
     material: String,
     position: Object,
@@ -32,6 +33,7 @@ export default {
       this.mesh.castShadow = this.castShadow;
       this.mesh.receiveShadow = this.receiveShadow;
       this.scene.add(this.mesh);
+      this.$emit('ready');
     },
   },
   render() {

src/plugin.js

@@ -1,6 +1,6 @@
 import * as TROIS from './index.js';
 
-export default {
+export const TroisJSVuePlugin = {
   install: (app) => {
     const comps = [
       'Camera',