Three.js 和 Vuejs 结合使用 - 文章教程

Three.js 和 Vuejs 结合使用

发布于 2021-08-27 字数 3103 浏览 1138 评论 0

当前搜到这篇文章,说明你对 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" target="_blank" class="external-link" 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();

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!