【选修】Vue+Three.js开发环境

视频讲解 (opens new window)

• Vue开发环境引入threejs
• 提醒：如果你不怎么熟悉Vue，那么本节课你完全不用学习，直接跳过去就行
• 本节课是选修内容，即便不学习本节课，也不影响你学习threejs后面的知识点。

如果你想了解更多Vue+Threejs结合开发的详细知识点，可以参考系统课程 (opens new window)后面Vue+Threejs实战案例或课件里面Vue+Threejs案例模板。

threejs与前端框架结合问题

有些同学是前端转来过来的，受到平时开发习惯影响，第一反应可能是threejs能不能与vue或react结合。

其实threejs知识点相对普通web前端是比较独立的，threejs的用法，你直接用.html文件写，还是结合vue或React框架写，API语法都是一样的。

所以你学习threejs的重点不是考虑前端框架问题，而是threejs本身，掌握了threejs，剩下的事情就很简单了。

Vue与threejs结合思路

回顾下前面1.6. 第一个3D案例 (opens new window)知识点

three.js执行渲染方法.render();会输出一个canvas画布renderer.domElement，这个Canvas画布本质上就是一个HTML元素。

threejs与Vue结合的时候，你只需要把Canvas画布renderer.domElement插入到你的Vue页面上就行，插入任何一个div或其它元素中，或者放到某个Vue组件中都行。

// WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); 
renderer.render(scene, camera);
//three.js执行渲染命令会输出一个canvas画布(HTML元素)
document.body.appendChild(renderer.domElement);

接下来，你写的threejs代码结构，并不一定就要和我下面视频完全一致，你可以根据你自己项目情况，自由调整。

脚手架Vite

使用脚手架Vite快速创建一个vue工程文件，具体跟着视频可操作即可

npm create  vite@latest

执行命令npm create vite@latest，然后选择你想要的开发环境即可。

vite使用文档 (opens new window)

第一步是选择你的前端框架，第二步是选择是否支持TS。

注意：安装使用Vite之前，确保你电脑已经安装Nodejs (opens new window)了，尽量用最新版本的。

预览vite项目默认效果

• 命令行执行npm i，安装所有默认依赖

• 命令行执行npm run dev，查看vite里面Vue代码默认渲染效果。

现在你可以把默认的HTML和CSS代码删掉，然后在引入threejs代码。

npm安装threejs

安装threesjs时候，你可以指定你想要的版本。

// 比如安装157版本
npm install three@0.157.0 -S

Vue中引入threejs代码

新建index.js文件,把threejs代码写在index.js里面。

index.js文件引入three.js。

import * as THREE from 'three';

复制前面课程第一个3D案例 (opens new window)的代码，粘贴到index.js文件。

// 三维场景
const scene = new THREE.Scene();
// 模型对象
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, 
});
const mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(250);
scene.add(axesHelper);
const width = 800; //宽度
const height = 500; //高度
// 相机
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);
// WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); 
renderer.render(scene, camera);
//three.js执行渲染命令会输出一个canvas画布(HTML元素)，你可以插入到web页面中
document.body.appendChild(renderer.domElement);

然后把threejs对应的index.js文件引入到vue的main.js文件中。

// main.js文件
import './index.js'// 执行threejs代码

当然你也可以根据需要，在其它Vue组件中调用执行threejs代码。

设置canvas画布全屏

上面画布设置了固定宽高度，下面改成文档区域宽高度，也就是所谓canvas画布全屏

const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);

// 可以放到vite项目style.css文件中
body{
    // 把canvas画布与body区域边距设置为0
    margin: 0px;
}

引入扩展库OrbitControls

查看文件node_modules，在目录three/examples/jsm中，你可以看到threejs的很多扩展库。

对于这些扩展库，不会一次都引入，一般你用到那个，单独引入即可，下面以OrbitControls为例给大家展示。

OrbitControls功能就是旋转缩放平移，在1.9小节有具体讲解：1.9. 相机控件OrbitControls (opens new window)，如果还没学习，可以提前看下。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

复制1.9. 相机控件OrbitControls (opens new window)里面关于相机控件的代码。

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件