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,經驗不足，望指正