说两句题外话,这两天之前的项目终于有阶段性的胜利了,终于能有点时间总结与下这个项目中用到的东西了,之前四月就准备将Three.js开发机房的案例记录一下,怎奈天不随人愿,刚准备开始写这块东西项目据开始了,然后就开始了昏天黑地的开发,一天天累的狗一样,废话少说,开工
----------------------------------------------------------------------------------------------------------------
在用Three.js之前,我们需要知道啥东西是Three.js
Three.js是一套基于WebGL的库,封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较高,Three.js对WebGL提供的接
口进行了非常好的封装,简化了很多细节,大大降低了学习成本;
先从官网下载Three.js及一些工具js,然后通过script引入,我市将Three.js集成到Vue中进行开发,以下代码都以Vue开发环境为基础进行介绍。
1、安装Vue脚手架,不清楚的可以去看看我的Vue中的几篇博文;此处不做过多的介绍
2、安装Three.js,打开终端输入
npm install three.js --save-dev
等待安装完成就可以开搞了。
首先我们需要熟悉一下几个知识点:
a: Three.js所渲染的场景、相机、灯光都需要我们自己配置;
b: 我们在Three.js中看到我们创建的模型旋转其实并不是模型在旋转,而是我们的视角在旋转,就像我们围着看一盆花,当我们围着一盆花转时,当我们把自己的位置看作相对静止,看到的其实就是花盆在转;
c: 三角函数(手动狗头)
那就开搞吧,我们在Vue的脚手架内进行开发,所以可以美美哒使用ES6的一些特性,比如Class,
import * as THREE from 'three'; // 加载 Three.js 库文件
import * as TWEEN from 'tween'; // 加载Three.js 轨迹插件
import Detector from "/static/js/libs/Detector.js"; // 加载 WebGl 探测器
import { OrbitControls } from "/static/js/control/OrbitControls"; // 加载Three.jskognzhiq
import THREEBSP from "/static/js/libs/ThreeBSP"; // 加载模型裁切函数
class DrawHouse{
/**
* 构造方法初始化
* @param { 绘制对象 } el
* @param { 绘制对象距离屏幕左边的距离 } canvas_left
* @param { 绘制对象距离屏幕顶部的距离 } canvas_top
* @param { 展现平台 } platform
* @param { 返回函数 } callback
*/
constructor(el, canvas_left, canvas_top, platform, callback){
this.el = el
this.camear__x = 0 ;
this.camear__y = 1500;
this.camear__z = 0;
this.initLen = 1500;
} }
3、首先我们初始化场景:
/**
* 初始化场景
*/
cerateScene() {
this.scene = new THREE.Scene();
}
4、然后初始化相机(也就是我们的眼睛)
/**
* 初始化相机
*/
createCamear() {
this.camera = new THREE.PerspectiveCamera(45, this.el.offsetWidth / this.el.offsetHeight, 1, 10000);
this.camera.position.set(this.camear__x, this.camear__y, this.camear__z);
var target = new THREE.Vector3();
this.camera.lookAt(target);
this.camera.fov = 50;
}
这里相机使用的是透视相机:PerspectiveCamera,该类型的相机使用透视矩阵;这个投影模式模拟人类视角。三维空间渲染中最常见的投影模式。
PerspectiveCamera有几个重要参数:fov, aspect, near, far;
Fov – 相机的视锥体的垂直视野角
Aspect – 相机视锥体的长宽比
Near – 相机视锥体的近平面
Far – 相机视锥体的远平面
其他参数后面 的专题中在介绍;
5、初始化光源,这里我们用的平行光源(点光源不适合这种场景)
/**
* 初始化光源
*/
createLight() {
// 设置环境光
var ambientLight = new THREE.AmbientLight(0x606060);
this.scene.add(ambientLight);
// 设置平行光
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 0.75, 0.5).normalize();
this.scene.add(directionalLight);
}
6、初始化渲染器
createRenderer() {
/**
* WebGLRenderer
* antialias 抗锯齿,平滑,默认false
* alpha 画布是否包含透明缓冲区,默认false
* gammaInput: Boolean 所有的纹理和颜色预乘伽马,默认false
* gammaOutput: Boolean 需要以预乘的伽马输出,默认false
* shadowMap: 属性有enabled(默认false)/autoUpdate(默认true)/needsUpdate(默认false)/type(默认 THREE.PCFShadowMap)
* setPixelRatio(value) 设置设备像素比
* setSize(width, height) 设置渲染器的范围
* setClearColor(color,alpha) 设置渲染的环境的颜色
*/
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(this.el.offsetWidth, this.el.offsetHeight);
this.renderer.setClearColor(0XFFFFFF, 0);
this.el.innerHTML = "";
this.el.appendChild(this.renderer.domElement);
this.container__W = this.el.offsetWidth;
this.container__H = this.el.offsetHeight;
this.renderer.gammaInput = true;
this.renderer.gammaOutput = true;
this.renderer.shadowMap.enabled = true;
}
7、初始化FPS函数
/**
* 初始化FPS函数
*/
animate() {
let _self = this;
requestAnimationFrame(_self.animate.bind(this));
this.render();
TWEEN.update();
}
/**
* 定义FPS函数执行的内容
*/
render() {
// 此处使用requestAnimationFrame 函数进行即时刷新,由于这个项目无需每秒60帧的刷新频率,所以我将刷新频率调整到20帧每秒
if (this.renderer && this.controlRender % 3 == 0) {
this.renderer.render(this.scene, this.camera);
if (this.angleCallback != "") {
var dir = new THREE.Vector3(-this.camera.position.x, 0, -this.camera.position.z).normalize();
this.roteteAngle = (180 / Math.PI) * Math.atan2(-dir.x, -dir.z);
this.angleCallback(this.roteteAngle);
}
this.controlRender = 0;
this.controls.update();
}
this.controlRender++;
}
这篇文章没有什么技术点,全部都是底层配置,跟着步骤走就好了。
-------------------------------------------------------------------------------------------------------------
有什么优化意见还请各位大佬提出,小弟也是今年才接触Three.js,经验不足,望指正