Three.js 和 Vuejs 结合使用

Question

当前搜到这篇文章，说明你对 Threejs 引擎和前框框架 vuejs 都有一定的了解，下面就简单说下在 vue-cli 脚手架中如何使用 threejs。

.html 文件中引入 vuejs

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

引入 vuejs 相关的 UI 组件库，可以直接使用相关按钮、进度条等UI组件

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

vue-cli 脚手架中使用 Three.js

npm 安装 three.js 依赖

npm install three --save-dev

引入 three.js，获得 threejs 库全部 API，在 vuejs

import * as THREE from 'three';
// 和在.html文件中一样使用threejs类
...
var Scene = new THREE.Scene();
...
var geo = new THREE.BoxGeometry(20,30,50)

import 方式获得 threejs 具体的类

import { Scene } from 'three';
const scene = new Scene();

vue-cli 脚手架中使用 examples 目录下 threejs 扩展库

安装依赖

npm i imports-loader exports-loader --save-dev

配置文件 \build\webpack.base.conf.js

module: {
  rules: [
    // OrbitControls.js库使用
    {
      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"
    },
    // CSS2DRenderer.js库使用
    {
      test: require.resolve("three/examples/js/renderers/CSS2DRenderer.js"),
      use: "imports-loader?THREE=three"
    },
    {
      test: require.resolve("three/examples/js/renderers/CSS2DRenderer.js"),
      use: "exports-loader?THREE.CSS2DRenderer"
    },
    // OBJLoader.js库使用
    {
      test: require.resolve("three/examples/js/loaders/OBJLoader.js"),
      use: "imports-loader?THREE=three"
    },
    {
      test: require.resolve("three/examples/js/loaders/OBJLoader.js"),
      use: "exports-loader?THREE.OBJLoader"
    },
...
  ]
},

在使用的 .vue 文件引入要使用的模块

// 引入three.js
import * as THREE from 'three';
import OrbitControls from 'three/examples/js/controls/OrbitControls';
// 引入examples目录下threejs扩展库
var controls = new OrbitControls(camera);

import * as THREE from 'three';
import OBJLoader from 'three/examples/js/loaders/OBJLoader';
var OBJLoader = new OBJLoader();

import * as THREE from 'three';
import  {CSS2DRenderer} from 'three/examples/js/renderers/CSS2DRenderer';
var labelRenderer = new CSS2DRenderer();