Add component for importing 3MF files

rollup.config.js

@@ -15,6 +15,7 @@ const external = [
   'three/examples/jsm/loaders/FontLoader.js',
   'three/examples/jsm/loaders/FBXLoader.js',
   'three/examples/jsm/loaders/GLTFLoader.js',
+  'three/examples/jsm/loaders/3MFLoader.js',
   'three/examples/jsm/postprocessing/BokehPass.js',
   'three/examples/jsm/postprocessing/EffectComposer.js',
   'three/examples/jsm/postprocessing/FilmPass.js',

src/models/3MF.ts

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue'
+import { ThreeMFLoader } from 'three/examples/jsm/loaders/3MFLoader.js'
+import Model from './Model'
+
+export default defineComponent({
+  extends: Model,
+  created() {
+    const loader = new ThreeMFLoader()
+    this.$emit('before-load', loader)
+    loader.load(this.src, (threeMF) => {
+      this.onLoad(threeMF)
+      this.initObject3D(threeMF)
+    }, this.onProgress, this.onError)
+  },
+})

src/models/index.ts

@@ -1,2 +1,3 @@
 export { default as GltfModel } from './GLTF'
 export { default as FbxModel } from './FBX'
+export { default as ThreemfModel } from './3MF'

src/plugin.ts

@@ -64,6 +64,7 @@ export const TroisJSVuePlugin = {
 
       'FbxModel',
       'GltfModel',
+      'ThreemfModel',
 
       'BokehPass',
       'EffectComposer',