feat: model-fbx and update three.js (#167)

Add the model-fbx component and update the three.js version to v0.115 with update dds LoadingManager
hujiulong · Apr 20, 2020 · c700a0f · c700a0f
1 parent 65438bb
commit c700a0f
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 6 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,6 +15,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'prefer-destructuring': 'off',
     'no-param-reassign': 'off',
+    'linebreak-style': ['off', 'windows']
   },
   parserOptions: {
     parser: 'babel-eslint',

diff --git a/examples/App.vue b/examples/App.vue
@@ -36,6 +36,9 @@
                 <li class="examples-menu-item">
                     <router-link to="demo-obj-mtl">OBJ + MTL (.obj + .mtl)</router-link>
                 </li>
+                <li class="examples-menu-item">
+                    <router-link to="demo-fbx">FBX Model (.fbx)</router-link>
+                </li>
                 <li class="examples-menu-item">
                     <router-link to="demo-stl">STL Model (.stl)</router-link>
                 </li>

diff --git a/examples/pages/demo-fbx.vue b/examples/pages/demo-fbx.vue
@@ -0,0 +1,67 @@
+<template>
+  <demo-block :vue-code="code" :html-code="htmlCode">
+    <template slot="preview">
+      <model-fbx :backgroundAlpha="0" @on-load="onLoad" @on-error="onError"
+                 src="static/models/fbx/dancing.fbx"></model-fbx>
+      <div class="example-loading" v-show="loading"></div>
+    </template>
+  </demo-block>
+</template>
+
+<script>
+import DemoBlock from '../components/demo-block.vue';
+import ModelFbx from '../../src/model-fbx.vue';
+
+const code = `
+<template>
+    <model-obj src="static/models/fbx/dancing.fbx"></model-obj>
+</template>
+
+<script>
+    import { modelFbx } from 'vue-3d-model'
+
+    export default {
+        components: {
+            ModelFbx
+        }
+    }
+<\/script>
+`;
+
+const htmlCode = `
+<body>
+    <div id="app">
+        <model-fbx src="static/models/fbx/dancing.fbx"></model-fbx>
+    </div>
+    #scripts#
+    <script>
+        new Vue({
+            el: '#app'
+        })
+    <\/script>
+</body>
+`;
+
+export default {
+  name: 'demo-fbx',
+  data() {
+    return {
+      code,
+      htmlCode,
+      loading: true,
+    };
+  },
+  methods: {
+    onLoad() {
+      this.loading = false;
+    },
+    onError(e) {
+      console.error(e);
+    },
+  },
+  components: {
+    ModelFbx,
+    DemoBlock,
+  },
+};
+</script>
diff --git a/examples/pages/index.js b/examples/pages/index.js
@@ -6,6 +6,7 @@ import DemoRotate from './demo-rotate.vue';
 import DemoControls from './demo-controls.vue';
 import DemoObj from './demo-obj.vue';
 import DemoObjMtl from './demo-obj-mtl.vue';
+import DemoFbx from './demo-fbx.vue';
 import DemoGltf from './demo-gltf.vue';
 import DemoStl from './demo-stl.vue';
 import DemoCollada from './demo-collada.vue';
@@ -22,6 +23,7 @@ const pages = [
   DemoControls,
   DemoObj,
   DemoObjMtl,
+  DemoFbx,
   DemoStl,
   DemoCollada,
   DemoJson,

diff --git a/public/static/models/fbx/dancing.fbx b/public/static/models/fbx/dancing.fbx
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 
 import ModelObj from './model-obj.vue';
+import ModelFbx from './model-fbx.vue';
 import ModelThree from './model-three.vue';
 import ModelStl from './model-stl.vue';
 import ModelPly from './model-ply.vue';
@@ -18,6 +19,7 @@ const ModelDae = Vue.extend(ModelCollada, {
 
 const components = [
   ModelObj,
+  ModelFbx,
   ModelThree,
   ModelJson,
   ModelStl,
@@ -41,6 +43,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default {
   install,
   ModelObj,
+  ModelFbx,
   ModelThree,
   ModelJson,
   ModelStl,
@@ -53,6 +56,7 @@ export default {
 export {
   install,
   ModelObj,
+  ModelFbx,
   ModelThree,
   ModelJson,
   ModelStl,

diff --git a/src/model-fbx.vue b/src/model-fbx.vue
@@ -0,0 +1,42 @@
+<script>
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
+import mixin from './model-mixin.vue';
+
+export default {
+  name: 'model-fbx',
+  mixins: [mixin],
+  props: {
+    lights: {
+      type: Array,
+      default() {
+        return [
+          {
+            type: 'HemisphereLight',
+            position: { x: 0, y: 1, z: 0 },
+            skyColor: 0xffffff,
+            groundColor: 0xffffff,
+            intensity: 0.8,
+          },
+          {
+            type: 'DirectionalLight',
+            position: { x: 1, y: 1, z: 1 },
+            color: 0xffffff,
+            intensity: 0.8,
+          },
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      loader: new FBXLoader(),
+    };
+  },
+  methods: {
+    getObject(geometry) {
+      this.animations = geometry.animations;
+      return geometry;
+    },
+  },
+};
+</script>
diff --git a/src/model-gltf.vue b/src/model-gltf.vue
@@ -51,8 +51,6 @@ export default {
       }, (xhr) => {
         this.$emit('on-progress', xhr);
       }, (err) => {
-        console.log(err);
-
         this.$emit('on-error', err);
       });
     },

diff --git a/src/model-obj.vue b/src/model-obj.vue
@@ -2,12 +2,13 @@
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
 import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader';
-import * as THREE from 'three';
+import { LoadingManager } from 'three/src/loaders/LoadingManager';
 import { toIndexed } from './util';
 import mixin from './model-mixin.vue';
 
 // TODO: Better way to handle texture formats
-THREE.Loader.Handlers.add(/\.dds$/i, new DDSLoader());
+const manager = (new LoadingManager()); // 0.122+ new api
+manager.addHandler(/\.dds$/i, new DDSLoader());
 
 export default {
   name: 'model-obj',
@@ -45,8 +46,8 @@ export default {
     },
   },
   data() {
-    const objLoader = new OBJLoader();
-    const mtlLoader = new MTLLoader();
+    const objLoader = new OBJLoader(manager);
+    const mtlLoader = new MTLLoader(manager);
 
     mtlLoader.setCrossOrigin(this.crossOrigin);