Three引入obj檔案旋轉

<template>
    <div id="models">
        
    </div>
</template>

<script>
import { OBJLoader } from 'three-obj-mtl-loader'
export default {
    name: 'WorkspaceJsonThreeobj',

    data() {
        return {
           radius : 500,
           theta : 0,
           container:'',
           camera:'',
           scene:'',
           renderer:'',
           mouseX: 0,
           mouseY: 0,
           windowHalfX:window.innerWidth / 2,
           windowHalfY:window.innerHeight / 2,
           objects: [],
           obj:'',
           publicPath: process.env.BASE_URL
        };
    },

    mounted() {
        this.init();
		this.animate();
    },

    methods: {
        init() {
            var THREE = require('three');
            this.container = document.getElementById('models');
            
            // document.body.appendChild( this.container );
            this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            this.camera.position.z = 500;
            // camera.position.y = 200;
            // camera.position.x = -500;
            // 擷取場景對象
            this.scene = new THREE.Scene();
                                    // 環境光
            var ambient = new THREE.AmbientLight( 0xc9c9c9);
            this.scene.add( ambient );
            
            // var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1);// 建立方向光
            // directionalLight.position.set( -10, -10, -10 );

            // var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1);
            // directionalLight.position.set( 10, 10, 10 );
                                                            // 光的顔色  光的密度
            var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, 1);// 建立方向光
            directionalLight.position.set( 900, 900, 900);

            this.scene.add( directionalLight ); //将方向光添加到場景



            // 加入一個點光源：color 顔色, intensity 強度, distance 距離, decay 衰減
            // var pointLight =
            // 	new THREE.PointLight(0xFFFFFF);

            // // set its position
            // pointLight.position.x = 300;
            // pointLight.position.y = 200;
            // pointLight.position.z = 200;
            // scene.add(pointLight);

            // pointLight.position.x = -10;
            // pointLight.position.y = -10;
            // pointLight.position.z = -10;
            // scene.add(pointLight);

            // pointLight.position.x = -10;
            // pointLight.position.y = -10;
            // pointLight.position.z = 0;
            // // add to the scene
            // scene.add(pointLight);


            // pointLight.position.x = 10;
            // pointLight.position.y = 10;
            // pointLight.position.z = 0;
            // // add to the scene
            // scene.add(pointLight);

            
            //OBJECT LOADER WITH MANAGER START
            var manager = new THREE.LoadingManager();
            // 此函數在加載開始時被調用  被加載的項的url  目前已附加元件的個數。 總共所需要附加元件的個數
            manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
                // eslint-disable-next-line no-console
                console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
            };
            // 所有的項目加載完成後将調用此函數
            manager.onLoad = function ( ) {
                // eslint-disable-next-line no-console
                console.log( 'Loading complete!');
            }
            // 此方法加載每一個項，加載完成時進行調用。
            manager.onProgress = function ( item, loaded, total ) {
                // eslint-disable-next-line no-console
                console.log( item, loaded, total );
            };
            // 此方法将在任意項加載錯誤時，進行調用
            manager.onError = function ( url ) {
                // eslint-disable-next-line no-console
                console.log( 'There was an error loading ' + url );
            };
            var onProgress = function ( xhr ) {
                // eslint-disable-next-line no-console
                console.log(xhr);
                // if ( xhr.lengthComputable ) {
                // 	var percentComplete = xhr.loaded / xhr.total * 100;
                // 	console.log( Math.round(percentComplete, 2) + '% downloaded' );
                // }
            };
            var onError = function ( xhr ) {
                // eslint-disable-next-line no-console
                console.log(xhr);
            };
            let _this = this;
            // 建立 OBJLoader加載器
            var loader = new OBJLoader( manager );
            // 加載obj檔案，檔案位置    當加載過程成功完成以後将被調用的函數
            loader.load( `${_this.publicPath}static/models/js/leg4.obj`, function ( object ) {
                // object.position.y = - 80;
                // objects.push( object );
                _this.obj = object; // put your object as global
                _this.scene.add( object );
                _this.animate6();
            }, onProgress, onError );
            //END OF OBJECT LOADER

            //  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            // document.addEventListener( 'onmouseleave', rotate(), false );
            
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setPixelRatio( window.devicePixelRatio );
            this.renderer.setSize( window.innerWidth, window.innerHeight );
            this.container.appendChild( this.renderer.domElement );
            // document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            
            window.addEventListener( 'resize', this.onWindowResize, false );


        },
        animate6() {
            let _this = this;
            requestAnimationFrame(_this.animate6);

            this.obj.rotation.y += 0.01;

            this.renderer.render(this.scene, this.camera);
        },
		onWindowResize() {
            this.windowHalfX = window.innerWidth / 2;
            this.windowHalfY = window.innerHeight / 2;
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize( window.innerWidth, window.innerHeight );
        },
        onDocumentMouseMove( event ) {
            this.mouseX = ( event.clientX - this.windowHalfX ) / 2;
           this. mouseY = ( event.clientY - this.windowHalfY ) / 2;
        },
			//
        animate() {
            requestAnimationFrame( this.animate );
            this.render();
        },
        render() {
            this.camera.position.x += ( this.mouseX - this.camera.position.x ) * .5;
            this.camera.position.y += ( - this.mouseY - this.camera.position.y ) * .5;
            this.camera.lookAt( this.scene.position );

            // theta += 0.002;
            // camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
            // camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
            // camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
            // camera.lookAt( scene.position );
            // camera.updateMatrixWorld();

            // requestAnimationFrame( render );
            this.renderer.render( this.scene, this.camera );
        }
    },
}
</script>

<style  scoped>

</style>