models

src/models/FBX.js

@@ -1,16 +0,0 @@
-import { defineComponent } from 'vue';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
-import Model from './Model.js';
-
-export default defineComponent({
-  extends: Model,
-  props: {
-    src: String,
-  },
-  created() {
-    const loader = new FBXLoader();
-    loader.load(this.src, (fbx) => {
-      this.onLoad(fbx);
-    }, this.onProgress, this.onError);
-  },
-});

src/models/FBX.ts

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue'
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
+import Model from './Model.js'
+
+export default defineComponent({
+  extends: Model,
+  created() {
+    const loader = new FBXLoader()
+    loader.load(this.src, (fbx) => {
+      this.onLoad(fbx)
+    }, this.onProgress, this.onError)
+  },
+})

src/models/GLTF.js

@@ -1,16 +0,0 @@
-import { defineComponent } from 'vue';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import Model from './Model.js';
-
-export default defineComponent({
-  extends: Model,
-  props: {
-    src: String,
-  },
-  created() {
-    const loader = new GLTFLoader();
-    loader.load(this.src, (gltf) => {
-      this.onLoad(gltf.scene);
-    }, this.onProgress, this.onError);
-  },
-});

src/models/GLTF.ts

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import Model from './Model.js'
+
+export default defineComponent({
+  extends: Model,
+  created() {
+    const loader = new GLTFLoader()
+    loader.load(this.src, (gltf) => {
+      this.onLoad(gltf.scene)
+    }, this.onProgress, this.onError)
+  },
+})

src/models/Model.js

@@ -1,25 +0,0 @@
-import { defineComponent } from 'vue';
-import Object3D from '../core/Object3D';
-
-export default defineComponent({
-  extends: Object3D,
-  emits: ['load', 'progress', 'error'],
-  data() {
-    return {
-      progress: 0,
-    };
-  },
-  methods: {
-    onLoad(model) {
-      this.$emit('load', model);
-      this.initObject3D(model);
-    },
-    onProgress(progress) {
-      this.progress = progress.loaded / progress.total;
-      this.$emit('progress', progress);
-    },
-    onError(error) {
-      this.$emit('error', error);
-    },
-  },
-});

src/models/Model.ts

@@ -0,0 +1,29 @@
+import { Object3D as TObject3D } from 'three'
+import { defineComponent } from 'vue'
+import Object3D from '../core/Object3D'
+
+export default defineComponent({
+  extends: Object3D,
+  emits: ['load', 'progress', 'error'],
+  props: {
+    src: { type: String, required: true },
+  },
+  data() {
+    return {
+      progress: 0,
+    }
+  },
+  methods: {
+    onLoad(model: TObject3D) {
+      this.$emit('load', model)
+      this.initObject3D(model)
+    },
+    onProgress(progress: ProgressEvent) {
+      this.progress = progress.loaded / progress.total
+      this.$emit('progress', progress)
+    },
+    onError(error: ErrorEvent) {
+      this.$emit('error', error)
+    },
+  },
+})

src/models/index.js

@@ -1,2 +0,0 @@
-export { default as GLTFModel } from './GLTF.js';
-export { default as FBXModel } from './FBX.js';

src/models/index.ts

@@ -0,0 +1,2 @@
+export { default as GLTFModel } from './GLTF'
+export { default as FBXModel } from './FBX'