VUE2+THREE.JS项目搭建

THREE项目搭建

简介
学习文档推荐
搭建
- 1.下载three.js
- 2.新建3DWorkShop.vue文件
- 3.创建utils/three/tool.js
- 4.创建components/three/draw.vue[重点]
- - 4.1 引入文件
  - 4.2 初始化场景
  - 4.3 初始化渲染器
  - 4.4 初始化光源
  - 4.5 初始化相机(人眼模式)
  - 4.6 初始化控制器
  - 4.7 初始化动画
  - 4.8 添加全局方法
  - 4.9 加载模型
  - 4.10 执行方法

简介

three.js 是一个是基于WebGL 封装的一个易于使用且轻量级的 3D 库，ThreeJS 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，同时也极大地提高了性能。用户不需要详细地学习 WebGL，就能轻松创作出三维图形，是前端开发者研发 3D WEB 应用的主要工具

学习文档推荐

WebGl中文档:可以了解到three.js最基础的知识点,可以对相机,场景,控制器有初步的认识与了解
3D查看器:查看3D模型的在线网站

搭建

1.下载three.js

npm install --save three

npm install three-obj-mtl-loader :mtl模型加载

npm install three-orbit-controls :控制器

npm install three-stats:性能检测器

2.新建3DWorkShop.vue文件

用于3D车间最外层文件

3.创建utils/three/tool.js

将所有模型文件类型的获取方法写在一个js文件中

import { MTLLoader } from 'three-obj-mtl-loader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import {  FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'// 加载obj,mtl文件
export function objloader(path) {return new Promise(resolve => {var mtlLoader = new MTLLoader()//  初始化objvar objLoader = new OBJLoader()// 加载mtl文件mtlLoader.load(`three/${path}.mtl`, (mtl) => {// 初始化mtl.preload()// 加载贴图objLoader.setMaterials(mtl)objLoader.load(`three/${path}.obj`, (obj) => {resolve({mtl,obj})})})})
}// 加载fbx文件
export function fbxloader(path) {return new Promise(resolve => {var loader = new FBXLoader()loader.load(`three/${path}.fbx`, (fbx) => {resolve(fbx)}, function (xhr) {// 控制台查看加载进度xhr// 通过加载进度xhr可以控制前端进度条进度   Math.floor:小数加载进度取整console.log('加载进度' + Math.floor(xhr.loaded / xhr.total * 100) + '%');})})
}
// 加载gtlf文件
export function gltfloader(path) {return new Promise(resolve => {var loader = new GLTFLoader()loader.load(`three/${path}.gltf`, (gltf) => {resolve(gltf)})})
}

4.创建components/three/draw.vue[重点]

创建html

<div class="draw" ref="draw"><div id="webgl" v-if="isShowWebgl"></div>
</div>

注意点:要将three相关的参数定义到vue之外,不可以放到vue的data里(会导致卡顿问题)
具体原因是:three的相关参数会经常变动,而vue又会对data里面的变量进行变化追踪，所以就会卡
例如:
在这里插入图片描述

4.1 引入文件

import * as THREE from "three"; //  三维
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //  控制器

4.2 初始化场景

initScene(){scene = new THREE.Scene(); //  场景对象Scene
}

4.3 初始化渲染器

initRenderer(){renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });//   设置渲染区域尺寸renderer.setSize(this.$refs.draw.offsetWidth, this.$refs.draw.offsetHeight);//   开启渲染阴影renderer.shadowMap.enabled = true;renderer.shadowMap.type = THREE.PCFSoftShadowMap;renderer.hadowMapEnabled = true;//  body元素中插入canvas对象this.$refs.draw.appendChild(renderer.domElement);
}

4.4 初始化光源

//   初始化光源
initLight() {//增加环境光(环境光颜色,环境光强度)const ambientLight = new THREE.AmbientLight(0xffffff, 2);ambientLight.name = "ambientLight";scene.add(ambientLight);//增加太阳光const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);directionalLight.name = "directionalLight";directionalLight.position.set(8000, 8000, -2000);
},

4.5 初始化相机(人眼模式)

sightline = { scale: 45, //  视线比例type: "PerspectiveCamera", //  相机的类型posiy: [-5000, 7000, 16000], //  相机位置
};
//   初始化相机
initCamera() {const k = this.$refs.draw.offsetWidth / this.$refs.draw.offsetHeight; //  窗口宽高比camera = new THREE.PerspectiveCamera(this.sightline.scale, k, 1, 100000);camera.position.set(this.sightline.posiy[0], this.sightline.posiy[1], this.sightline.posiy[2]);camera.up.set(0, 1000, 0);camera.lookAt(0, 0, 1);
},

4.6 初始化控制器

//   初始化控制
initOrbitControls() {controls = new OrbitControls(camera, renderer.domElement); //  创建控件对象controls.target.set(0, 0.5, 0); //控制器轴的方向，Y轴向上controls.update(); //控制器更新
},

4.7 初始化动画

//   设置动画
animate() {if (!renderer) {return;}if (this.count < 2) {this.count++;renderer.render(scene, camera);controls.update();}if (animateId) cancelAnimationFrame(animateId);animateId = requestAnimationFrame(this.animate);
},

4.8 添加全局方法

//   添加全局方法
addmeth() {//   监听窗口尺寸变化window.addEventListener("resize", this.changeSize, false);
},
//   监听尺寸变化
changeSize() {//   重置渲染器输出画布canvas尺寸renderer.setSize(this.$refs.draw.offsetWidth, this.$refs.draw.offsetHeight);const k = this.$refs.draw.offsetWidth / this.$refs.draw.offsetHeight; //  窗口宽高比//  重置相机投影的相关参数camera.aspect = k;//   需要执行updateProjectionMatrix ()方法更新相机的投影矩阵camera.updateProjectionMatrix();
},

4.9 加载模型

<draw ref="draw" :initLoader="initLoader" :eqpList="eqpList" />

在3DWorkShop的methods里:

import { fbxloader } from "@/utils/three/tool";// 引入模型文件
initLoader() {
//sip 是文件名[文件必须存放到public里,我放的位置是public/three/sip.fbx]fbxloader(sip).then(obj=>{this.$refs.draw.addScene(fbx);})
},

4.10 执行方法

mounted(){this.init();//初始化渲染	this.animate();//添加动画this.addmeth();//添加事件
},
init(){//初始化场景this.initScene();//   初始化渲染对象this.initRenderer();//   初始化模型this.initLoader();//   初始化光源this.initLight();//   初始化相机this.initCamera();//   初始化控制this.initOrbitControls();
}