vue 渲染3d模型基本用法

1、首先利用淘宝镜像，操作命令为：
cnpm install three --save
2.接下来安装加载.obj和.mtl文件的插件：
 cnpm install three-obj-mtl-loader --save
3.安装three-orbitcontrols：进行旋转缩放拖动控制
 cnpm install three-orbitcontrols  --save
4.webpack.base.conf.js配置：module》rules添加
{test:require.resolve("three/examples/js/controls/OrbitControls"), use:"imports-loader?THREE=three"}
{test:require.resolve("three/examples/js/controls/OrbitControls"),use:"exports-loader?THREE.OrbitControls"}
5.页面引入：
import *as THREEfrom 'three'
import {OBJLoader}from 'three-obj-mtl-loader'
import OrbitControlsfrom 'three/examples/js/controls/OrbitControls'
6. 当前我使用的是vue-cli2.x ,*.obj文件不需要通过编译，使用放在static文件夹里，
7.上代码：
init:function () {

    var _this=this;

    //        var url = 'http://192.168.1.186:8080/image/scan.obj';------------------------提示产生跨域

        var url ='../static/model/scan.obj';

        _this.scene =new THREE.Scene();

        _this.camera =new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000);

        _this.camera.position.set(0, 0, 100);

        _this.renderer =new THREE.WebGLRenderer();

        _this.renderer.setClearColor(0x404040);

        _this.renderer.setSize(620, 620);//布景大小

        document.body.appendChild( _this.renderer.domElement);

        _this.controls =new THREE.OrbitControls( _this.camera,  _this.renderer.domElement);

        var light =new THREE.DirectionalLight(0xffffff, 0.5);

        light.position.setScalar(100);

        _this.scene.add(light);

        _this.scene.add(new THREE.AmbientLight(0xffffff, 0.5));

        _this.scene.add(new THREE.GridHelper(100, 100));

        var objLoader =new THREE.OBJLoader();

        objLoader.load(url, function (object) {

        object.rotation.x = -Math.PI *0.5;

          var box =new THREE.Box3().setFromObject(object);

          var box3Helper =new THREE.Box3Helper(box);

          _this.scene.add(box3Helper);

          _this.scene.add(object);

        });

      },

      render() {

        var  _this=this;

        requestAnimationFrame(_this.render);//60次/秒

        _this.renderer.render( _this.scene,  _this.camera);

      }

8、其他问题：
npm install 其他插件之后，很容易出现three.js相关的报错，查看node_modules文件夹下的确实three的文件夹会缺失，需要在根目录下运行cnpm install即可，three会重新装回来。

9.如何用cdn引入呢还在爬坑中。。。。。