defineComponent for core components (#10)

src/core/Camera.js

@@ -1,6 +1,7 @@
+import { defineComponent } from 'vue';
 // import Object3D from '../core/Object3D.js';
 
-export default {
+export default defineComponent({
   // TODO: eventually extend Object3D, for now: error 'injection "scene" not found'
   // because camera is a sibling of scene in Trois
   // extends: Object3D,
@@ -8,4 +9,4 @@ export default {
   render() {
     return this.$slots.default ? this.$slots.default() : [];
   },
-};
+});

src/core/Group.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { Group } from 'three';
 import Object3D from './Object3D.js';
 
-export default {
+export default defineComponent({
   name: 'Group',
   extends: Object3D,
   created() {
@@ -9,4 +10,4 @@ export default {
     this.initObject3D(this.group);
   },
   __hmrId: 'Group',
-};
+});

src/core/Object3D.js

@@ -1,7 +1,7 @@
-import { watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   name: 'Object3D',
   inject: ['three', 'scene', 'rendererComponent'],
   emits: ['created', 'ready'],
@@ -65,4 +65,4 @@ export default {
     return this.$slots.default ? this.$slots.default() : [];
   },
   __hmrId: 'Object3D',
-};
+});

src/core/OrthographicCamera.js

@@ -1,9 +1,9 @@
+import { defineComponent, watch } from 'vue';
 import { OrthographicCamera } from 'three';
-import { watch } from 'vue';
 import { bindProp } from '../tools';
 import Camera from './Camera.js';
 
-export default {
+export default defineComponent({
   extends: Camera,
   name: 'OrthographicCamera',
   inject: ['three'],
@@ -31,4 +31,4 @@ export default {
     this.three.camera = this.camera;
   },
   __hmrId: 'OrthographicCamera',
-};
+});

src/core/PerspectiveCamera.js

@@ -1,9 +1,9 @@
+import { defineComponent, watch } from 'vue';
 import { PerspectiveCamera } from 'three';
-import { watch } from 'vue';
 import { bindProp } from '../tools';
 import Camera from './Camera.js';
 
-export default {
+export default defineComponent({
   extends: Camera,
   name: 'PerspectiveCamera',
   inject: ['three'],
@@ -32,4 +32,4 @@ export default {
     this.three.camera = this.camera;
   },
   __hmrId: 'PerspectiveCamera',
-};
+});

src/core/Raycaster.js

@@ -1,6 +1,7 @@
+import { defineComponent } from 'vue';
 import usePointer from './usePointer';
 
-export default {
+export default defineComponent({
   name: 'Raycaster',
   inject: ['three', 'rendererComponent'],
   props: {
@@ -45,4 +46,4 @@ export default {
     return [];
   },
   __hmrId: 'Raycaster',
-};
+});

src/core/Renderer.js

@@ -1,7 +1,7 @@
-import { h } from 'vue';
+import { defineComponent, h } from 'vue';
 import useThree from './useThree';
 
-export default {
+export default defineComponent({
   name: 'Renderer',
   props: {
     antialias: Boolean,
@@ -77,4 +77,4 @@ export default {
     return h('canvas', {}, this.$slots.default());
   },
   __hmrId: 'Renderer',
-};
+});

src/core/Scene.js

@@ -1,7 +1,7 @@
+import { defineComponent, watch } from 'vue';
 import { Scene, Color } from 'three';
-import { watch } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'Scene',
   inject: ['three'],
   props: {
@@ -32,4 +32,4 @@ export default {
     return this.$slots.default ? this.$slots.default() : [];
   },
   __hmrId: 'Scene',
-};
+});