Three.js 开发机房（一）
说两句题外话，这两天之前的项目终于有阶段性的胜利了，终于能有点时间总结与下这个项目中用到的东西了，之前四月就准备将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,经验不足，望指正
