Skip to main content

在vue中安装threejs引擎

在vue工程中安装threejs​

使用npm指令安装。 

npm install three

在engine.vue中声明threejs​

<script>
import * as THREE from "three";
...
</script>

安装操作控制插件OrbitControls.js​

npm install three-orbit-controls

然后在vue组件中声明。 

<script>
import * as THREE from "three";
const OrbitControls = require('three-orbit-controls')(THREE);
...
</script>

同时，安装模型材质加载插件、性能检测插件。 

npm i --save three-obj-mtl-loader
npm i three-fbx-loader
npm i three-stats

然后将其配置到vue页面。 

<script>
  import axios from 'axios';
  import * as THREE from "three";
  import * as TrackballControls from 'three-trackballcontrols'
  import * as ThreeStats from 'three-stats'
  import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader';
  const OrbitControls = require('three-orbit-controls')(THREE);
  ···
</script>

到这里，threejs已经安装完成了。

参考文章

【vue+Three.js快速实现全景图】（https://www.jianshu.com/p/b31cd297d333）