vue中three.js加载外部模型

最近在做项目迁移时，需要将之前的three.js项目迁移到vue中。这里整理了一个vue中利用three.js加载外部模型的小例子。供新手入门参考。闲话少说，下面实战讲解。

1.首先安装Three.js及相关文件依赖

我之前的博客里详细讲解过利用npm来安装一些依赖，具体可以参照我的上一篇博文：vue页面引入three.js创造3d动画场景先将所需要的文件安装完成。

2.文件安装完成之后，将要加载的外部模型文件放入static文件夹下

注意，必须放入static文件夹下，否则可能出现无法访问的情况。我这里在static文件夹下建立了一个models文件夹，模型的mtl、obj以及贴图文件都放在这里。后续如果模型数量过多，可以根据功能或场景新建子文件夹分别放入，便于管理。

3.新建vue页面，引入相关依赖包，编写函数代码

具体代码如下：

   <template>
  <div id="container">
  </div>
</template>
<script>
  import * as THREE from "three";
  import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader';
  import {CSS2DRenderer, CSS2DObject} from 'three-css2drender';

  const OrbitControls = require('three-orbit-controls')(THREE);
  export default {
    name: "vue-three",
    data() {
      return {
        scene: '',
        light: '',
        camera: '',
        controls: '',
        renderer: '',
      }
    },
    methods: {
      //初始化three.js相关内容
      init() {
        this.scene = new THREE.Scene();
        this.scene.add(new THREE.AmbientLight(0x999999));//环境光
        this.light = new THREE.DirectionalLight(0xdfebff, 0.45);//从正上方（不是位置）照射过来的平行光，0.45的强度
        this.light.position.set(50, 200, 100);
        this.light.position.multiplyScalar(0.3);
        this.scene.add(this.light);
        //初始化相机
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        this.camera.position.set(10, 90, 65);
        this.camera.lookAt(this.scene.position);
        //初始化控制器
        this.controls = new OrbitControls(this.camera);
        this.controls.target.set(0, 0, 0);
        this.controls.minDistance = 80;
        this.controls.maxDistance = 400;
        this.controls.maxPolarAngle = Math.PI / 3;
        this.controls.update();
        //渲染
        this.renderer = new THREE.WebGLRenderer({
          alpha: true,
        });
        this.renderer.setClearColor(0x000000);
        this.renderer.setPixelRatio(window.devicePixelRatio);//为了兼容高清屏幕
        this.renderer.setSize(window.innerWidth, window.innerHeight);

        const container = document.getElementById('container');
        container.appendChild(this.renderer.domElement);
        window.addEventListener('resize', this.onWindowResize, false);//添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
      },
      //窗口监听函数
      onWindowResize() {
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
      },
      animate() {
        requestAnimationFrame(this.animate);
        this.render();
      },
      render() {
        this.renderer.render(this.scene, this.camera);
      },
      //外部模型加载函数
      loadObj() {
        //包含材质
        new MTLLoader().setPath('/static/models/').load('Shirley.mtl', materials => {
          console.log("materials", materials);
          materials.preload();
          new OBJLoader().setMaterials(materials).setPath('/static/models/').load('Shirley.obj', obj => {
            obj.scale.set(30, 30, 30);
            obj.position.set(0, 0, 0);
            this.scene.add(obj);
          });
        });
      }
    },
    mounted() {
      this.init();
      this.loadObj();
      this.animate();
    }
  }
</script>

<style scoped>
#container{
  width: 1200px;
  margin: 0 auto;
  height: 800px;
  overflow: hidden;
}
</style>

4.效果如下：

模型文件来源于网络。本文针对新手加载模型试玩，如有不足，请多多指教。
附上本文demo的git地址：https://gitee.com/Marinc/vue-three
参考文章：https://juejin.im/post/5ba06119e51d450e84779ece