Three入門學習筆記整理

時間 2019-11-18

標籤入門學習筆記整理简体版

原文原文鏈接

1、官方網站:https://threejs.org
2、關於Three.js
3、開始
4、實例
- 基本結構
- 結果
5、概念
- 座標系
- 場景
- 相機
- 燈光
- 3D模型
6、簡單動畫
7、交互控制
結束html

# Three入門學習筆記整理 #

1、官方網站:https://threejs.org

2、關於Three.js

WebGL是大部分瀏覽器直接支持的一種3D繪圖標準，它能夠建立二維圖形和應用，還能夠充分利用GPU，建立漂亮的、高性能的三維應用。直接使用WebGL很是複雜，Three.js庫提供了一套基於WebGL的、很是易用的JavaScrip API，它源自github的一個開源項目，經過這些API能夠直接在瀏覽器中建立三維場景。本文整理了一些入門資料。git

3、開始
引入
能夠直接在HTML引入Three.js：

<script src="three.js"></script>

也能夠用npm安裝：
npm i three
import * as THREE from 'three'github

使用
three渲染一個3D場景須要如下必要元素:
1.場景(Scene)：是物體、光源等元素的容器，要渲染的東西須要先添加進場景；
2.相機（Camera）：控制視角的位置、範圍以及視覺焦點的位置,一個3D環境中只能存在一個相機；
3.光源（Light）：包括全局光、平行光、點光源；
4.物體對象（Mesh）：包括二維物體（點、線、面）、三維物體、粒子等；
5.渲染器（Renderer）：指定渲染方式，如webGL\canvas2D\Css2D\Css3D等；
非必要元素：
控制器(Control)：相機控件，可經過鍵盤、鼠標控制相機的移動。web

4、實例

基本結構

const width = window.innerWidth;
const height = window.innerHeight;
var renderer;
var camera;
var light;
var scene;chrome

function initRender() {
// 初始化渲染器
renderer = new THREE.WebGLRenderer({
antialias: true// 抗鋸齒
});
renderer.setSize(width, height); // 設置大小
renderer.setClearColor(0xffffff, 1.0); // 設置背景色
document.body.appendChild(renderer.domElement);
}npm

function initScene() {
// 初始化場景
scene = new THREE.Scene();
}json

function initCamera() {
// 初始化相機
camera = new THREE.PerspectiveCamera(45, width / height, 10, 10000); // 添加透視相機
camera.position.set(500, 500, 500); // 設置相機位置
camera.up.set(0, 1, 0); // 相機以哪一個軸爲上方
camera.lookAt(0, 0, 0); // 相機焦點設置
}canvas

function initLight() {
// 初始化燈光
light = new THREE.DirectionalLight({ color: 0xffffff }); // 添加平行光
light.position.set(1, 0, 0); // 光的方向(x,y,z)
scene.add(light);
let pointLight = new THREE.PointLight(0xffffff); // 添加點光源
pointLight.position.set(100, 100, 100); // 點光源的位置
scene.add(pointLight);
let pointHelper = new THREE.PointLightHelper(pointLight, 5, 0xff0000); // 設置點光源輔助工具,能夠看到點光源的位置
scene.add(pointHelper);
}api

function initObject() {
// 初始化物體
let geometry = new THREE.CylinderGeometry(100, 100, 300, 100, 100); // 添加一個圓柱體
let material = new THREE.MeshLambertMaterial({
color: 0xffff00
}); // 添加材料
// material.wireframe=true; // 圓柱體是否以網格顯示
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
}瀏覽器

function initAxes() {
// 添加輔助座標軸
let axes = new THREE.AxesHelper(1000);// 藍色爲Z軸，綠色爲Y軸，紅色爲X軸
scene.add(axes);
}

function threeStart() {
initRender();
initScene();
initCamera();
initLight();
initAxes();
initObject();
renderer.clear();
renderer.render(scene, camera);
}

window.onload = function () {
threeStart();
};

結果

5、概念

座標系

three.js中採用的是右手座標系，座標軸方向主要是camera.up.set(x, y, z);設置。也就是說在相機眼裏（其實就是咱們看的角度）哪一個軸向上。理解座標系很重要，詳情請看three右手座標系講解。

場景

物體、光源、控制器的添加必須使用secen.add(object)添加到場景中才能渲染出來。

var scene;
function initScene(){
scene=new THREE.Scene();
}

相機

正交投影相機：
THREE.OrthographicCamera(left, right, top, bottom, near, far) // 大小不因遠近而變化
透視投影相機：
THREE.PerspectiveCamera(fov, aspect, near, far) // 遵循近大遠小的空間規則

通常狀況下，咱們使用的是透視投影相機，其參數爲：

fov：垂直方向夾角(視角)
aspect：可視區域長寬比 width/height
near：渲染區域離攝像機最近的距離
far：渲染區域離攝像機最遠的距離，僅在距離攝像機near和far間的區域會被渲染到canvas中

相機的位置設置：
camera.position.set(x,y,z)或camera.position = new THREE.Vector3(x, y, z);
控制相機的焦點位置，決定相機的朝向
camera.lookAt(0, 0, 0);
添加相機輔助工具來查看相機的位置

燈光

全局光：THREE.AmbientLight，影響整個scene的光源，通常是爲了弱化陰影或調整總體色調，可設置光照顏色，以顏色的明度肯定光源亮度；
平行光：THREE.DirectionalLight，模擬相似太陽的光源，全部被照射的區域亮度是一致的，可設置光照顏色、光照方向（經過向量肯定方向），以顏色的明度肯定光源亮度；
點光源：THREE.PointLight，單點發光，照射全部方向，可設置光照強度，光照半徑和光顏色；
聚光燈：THREE.SpotLight，這種光源有聚光的效果，相似於檯燈，吊燈，手電筒。
最簡單的用法：

function initLight() {  
  light = new THREE.DirectionalLight({ color: 0xffffff }); // 建立白色平行光  
  light.position.set(1, 0, 0); // 平行光只需設置方向向量，其餘光源須要設置具體位置
  scene.add(light);  
}

光影關係能夠顯著影響顯示效果。參考資料：http://www.javashuo.com/article/p-fpmsflmb-be.html

3D模型

咱們能夠用three自由地建立一些點、線、面和幾何體。或者加載一些已經作好的3D模型，three更新的很快，目前支持大部分格式的3D模型，之後會愈來愈多。

function initObject() {
  // 添加一個圓柱體
  let geometry = new THREE.CylinderGeometry(100, 100, 300, 100, 100);
  let material = new THREE.MeshLambertMaterial({ color: 0xffff00 });
  mesh = new THREE.Mesh(geometry, material);
  mesh.position = new THREE.Vector3(0, 0, 0);
  scene.add(mesh);
}

CylinderGeometry是柱體，控制底面邊的數量能夠獲得近似的圓柱體，還能夠建立正方體、球、環、文字等已經設定好的幾何體。若是庫裏沒有須要的，能夠本身建立自定義幾何體。

function initCar() {  
  // 加載一個外部.obj汽車模型
  let mtlLoader = new THREE.MTLLoader();  
  mtlLoader.load('../../../3Dmodel/Lamborghini/Avent.mtl', (materials) => {  
    // 加載材料
    materials.preload();  
    let objLoader = new THREE.OBJLoader();  
    objLoader.setMaterials(materials);  
    objLoader.load('../../../3Dmodel/Lamborghini/Avent.obj', (object) => {// 加載模型  
        object.scale.set(80, 80, 80); // 放大倍數  
        scene.add(object);  
      }, (suc) => { console.log(((suc.loaded / suc.total) * 100) + '% OBJloaded'); }, (err) => { console.log(err); }  
    );  
  }, (suc) => { console.log(((suc.loaded / suc.total) * 100) + '% MTLloaded'); }, (err) => { console.log(err); });  
}

three.js加載外部文件須要用「loader系列」方法，經過這些方法能夠加載.obj、.json、.dae等格式的模型(點擊查看不一樣格式的模型之間的差別及優劣）。

像這種將一張圖片看成一個平面的，要用Texture加載材質（紋理）。參考資料

6、簡單動畫

動畫
動畫有兩種方式，一種是讓圖像動，另外一種是讓相機動。
一個簡單的旋轉：

function animate() {
    var v1 = new THREE.Vector3( 1, 1, 1 );
    meshAll.rotateOnAxis(v1,0.01);
    mesh.rotation.z -= 0.01;
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
    stats.update();
  }

性能檢測
爲了監控幀率，引用Stats插件來監控動畫的幀率

<script src="Stats.js"></script>
  ……
  function initStats() {  
    stats = new Stats();  
    stats.domElement.style.position = 'absolute';  
    stats.domElement.style.top = '0px';  
    stats.domElement.style.left = '0px';  
    document.body.appendChild(stats.domElement);  
  }

7、交互控制

dat.gui

資料：http://www.javashuo.com/article/p-uewwsuvk-v.html

其它插件
three本身也提供了不少插件來控制，例如OrbitControls，詳情請看官網！

function initControl() {
    controls = new THREE.OrbitControls(camera);
    // controls.enabled = false;// boolean,禁用控制器
    // controls.enableKeys = false; // boolean,禁用鍵盤
    // controls.autoRotate = true; // boolean,是否自動旋轉,全部的旋轉都是繞着場景中心旋轉，不是原點
    // controls.autoRotateSpeed = 2; // Number,自動旋轉速度
    controls.enableDamping = true; // boolean, 開啓後有緩衝效果，具備物理的阻力感
    controls.dampingFactor = 0.3; // Float, 阻尼係數(0~1)，數值越低，阻力越小
    // controls.enablePan = false; // boolean,禁止平移
    // controls..panSpeed = 0.5; // 平移速度
    // controls.enableRotate = false; // boolean,禁止旋轉
    // controls.enableZoom = false; // boolean,禁止遠近拉伸
    // controls.zoomSpeed = 0.1;// 鼠標滾動一個單位時拉伸幅度
    // controls.rotateSpeed = 0.5;// 旋轉速度
    // controls.keyPanSpeed = 0.5; // Float, 用鍵盤平移的速度
    // controls.keys = {
    //   LEFT: 65,
    //   RIGHT: 68,
    //   UP: 87,
    //   BOTTOM: 83
    // }; // 鍵盤編碼
    // controls.minAzimuthAngle = 0 * Math.PI; // 水平方向最小角度
    // controls.maxAzimuthAngle = 0.5 * Math.PI; // 水平方向最大角度，當Z軸向上時，從Z軸正方向往下看，逆時針90度
    // controls.minDistance = 500; // 相機離物體最近距離
    // controls.maxDistance = 600; // 相機離物體最遠距離
    // controls.minPolarAngle = 0 * Math.PI;// 上下兩極的可視區域最小角度
    // controls.maxPolarAngle = 0.5 * Math.PI;// 上下兩極的可視區域最大角度，Z軸向上，從屏幕正上方往下90度
    // controls.mouseButtons = {
    //   ORBIT: THREE.MOUSE.LEFT,
    //   ZOOM: THREE.MOUSE.MIDDLE,
    //   PAN: THREE.MOUSE.RIGHT
    // }; // 鼠標鍵位設置
    // controls.screenSpacePanning = false; // boolean,false時只能在不是向上軸的方向移動。好比相機Z軸向上，那麼物體只能在XY平面內移動
    // controls.target = new THREE.Vector3(300, 200, 0); // 相機聚焦座標
  }