Fix model offset correction bug.

examples/pages/demo-rotate.vue

@@ -29,7 +29,7 @@ const code = `
     export default {
         data: {
             rotation: {
-                x: 0,
+                x: -Math.PI / 2,
                 y: 0,
                 z: 0
             }
@@ -39,7 +39,7 @@ const code = `
                 this.rotate();
             },
             rotate () {
-                this.rotation.y += 0.01;
+                this.rotation.z += 0.01;
                 requestAnimationFrame( this.rotate );
             }
         },
@@ -64,7 +64,7 @@ const htmlCode = `
             el: '#app',
             data: {
                 rotation: {
-                    x: 0,
+                    x: -Math.PI / 2,
                     y: 0,
                     z: 0
                 }
@@ -74,7 +74,7 @@ const htmlCode = `
                     this.rotate();
                 },
                 rotate () {
-                    this.rotation.y += 0.01;
+                    this.rotation.z += 0.01;
                     requestAnimationFrame( this.rotate );
                 }
             }
@@ -91,7 +91,7 @@ export default {
             htmlCode,
             loading: true,
             rotation: {
-                x: 0,
+                x: -Math.PI / 2,
                 y: 0,
                 z: 0
             }
@@ -104,7 +104,7 @@ export default {
         },
         rotate () {
             requestAnimationFrame( this.rotate );
-            this.rotation.y += 0.01;
+            this.rotation.z += 0.01;
         }
     },
     components: {

src/index.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 import ModelObj from './model-obj.vue'
 import ModelThree from './model-three.vue'
 import ModelStl from './model-stl.vue'
@@ -31,7 +33,8 @@ if ( typeof window !== 'undefined' && window.Vue ) {
     install( window.Vue );
 }
 
-export { 
+export {
+    install,
     ModelObj,
     ModelThree,
     ModelJson,

src/model-collada.vue

@@ -1,7 +1,8 @@
 <script>
 import { ColladaLoader } from './loaders/ColladaLoader'
-import { toIndexed } from './util'
+import { toIndexed, getCenter } from './util'
 import mixin from './model-mixin.vue'
+import { Object3D } from 'three'
 
 export default {
     name: 'model-collada',
@@ -35,37 +36,14 @@ export default {
     data () {
 
         const loader = new ColladaLoader();
-        loader.options.convertUpAxis = true;
 
         return {
             loader
         }
     },
     methods: {
-        load () {
-
-            if ( !this.src ) return;
-
-            if ( this.object ) {
-                this.scene.remove( this.object );
-            }
-
-            this.loader.load( this.src, collada => {
-
-                this.object = collada.scene;
-
-                this.scene.add( this.object );
-
-                this.updateCamera();
-
-                this.$emit( 'on-load' );
-
-            }, err => {
-
-                this.$emit( 'on-error', err );
-
-            } );
-
+        getObject ( collada ) {
+            return collada.scene
         }
     }
 }

src/model-mixin.vue

@@ -111,6 +111,7 @@ export default {
             mouse: new Vector2(),
             camera: new PerspectiveCamera( 45, 1, 0.001, 100000 ),
             scene: new Scene(),
+            wrapper: new Object3D(),
             renderer: null,
             controls: null,
             allLights: [],
@@ -146,6 +147,8 @@ export default {
         this.renderer = new WebGLRenderer( { antialias: true, alpha: true, canvas: this.$refs.canvas } )
         this.renderer.shadowMap.enabled = true;
 
+        this.scene.add( this.wrapper )
+
         this.load();
         this.update();
 
@@ -324,12 +327,14 @@ export default {
                 if ( !object ) return;
 
                 distance = getSize( object ).length();
-                center = getCenter( object );
+                // center = getCenter( object );
 
                 camera.position.set( 0, 0, 0 );
                 camera.position.z = distance;
-                camera.position.add( center );
-                camera.lookAt( center );
+                // camera.position.add( center );
+                // camera.lookAt( center );
+
+                camera.lookAt( new Vector3() );
 
             } else {
                 // TODO
@@ -435,20 +440,20 @@ export default {
             if ( !this.src ) return;
 
             if ( this.object ) {
-                this.scene.remove( this.object );
+
+                this.wrapper.remove( this.object );
+
             }
 
-            this.loader.load( this.src, object => {
+            this.loader.load( this.src, ( ...args ) => {
+
+                const object = this.getObject( ...args )
 
                 if ( this.process ) {
                     this.process ( object );
                 }
 
-                this.object = object;
-
-                this.scene.add( this.object );
-
-                this.updateCamera();
+                this.addObject( object )
 
                 this.$emit( 'on-load' );
 
@@ -458,6 +463,24 @@ export default {
 
             } );
 
+        },
+        getObject( object ) {
+
+            return object
+
+        },
+        addObject( object ) {
+
+            const center = getCenter( object )
+
+            // correction offset
+            this.wrapper.position.copy( center.negate() )
+            
+            this.object = object
+            this.wrapper.add( object )
+
+            this.updateCamera()
+            
         },
         animate () {
             requestAnimationFrame( this.animate );

src/model-obj.vue

@@ -4,6 +4,9 @@ import { MTLLoader } from './loaders/MTLLoader'
 import { toIndexed } from './util'
 import mixin from './model-mixin.vue'
 
+import * as THREE from 'three'
+import { getSize, getCenter } from './util'
+
 export default {
     name: 'model-obj',
     mixins: [ mixin ],
@@ -66,7 +69,7 @@ export default {
             if ( !this.src ) return;
 
             if ( this.object ) {
-                this.scene.remove( this.object );
+                this.wrapper.remove( this.object );
             }
 
             const onLoad = object => {
@@ -75,11 +78,7 @@ export default {
                     this.process ( object );
                 }
 
-                this.object = object;
-
-                this.scene.add( this.object );
-
-                this.updateCamera();
+                this.addObject( object )
 
                 this.$emit( 'on-load' );
 

src/model-stl.vue

@@ -37,31 +37,9 @@ export default {
         }
     },
     methods: {
-        load () {
+        getObject( geometry ) {
 
-            if ( !this.src ) return;
-
-            if ( this.object ) {
-                this.scene.remove( this.object );
-            }
-
-            this.loader.load( this.src, geometry => {
-
-                this.object = new Mesh( geometry, new MeshPhongMaterial() );
-
-                this.scene.add( this.object );
-
-                
-
-                this.updateCamera();
-
-                this.$emit( 'on-load' );
-
-            }, err => {
-
-                this.$emit( 'on-error', err );
-
-            } );
+            return new Mesh( geometry, new MeshPhongMaterial() )
 
         }
     }