Three.js 入門與掃盲-基礎結構,坐標系與幾何類型介紹

WebGL 是基於 OpenGL ES 2.0 的 Web 標準，可以通過 HTML5 Canvas 元素作為 DOM 介面訪問。Three.js 封裝了底層的的圖形操作介面,使用戶可以便捷的操作構建空間物體與場景,實現 3D 可視化. 一個完整的 Three.js 必定包含一些必要的結構,例如場景,相機等等,而在深入了解 Three.js 及相關操作之前,有幾個概念有必要完整的學習一遍. 本文基於此目的, 詳細的描述了一個完整的 Three.js 程序的基本結構, 空間坐標系以及匯總了常用的 Three.js 中的幾何類型.

注: 本筆記記載內容基於 Three.js r85 實現.

Three.js 基礎結構與分析

一個典型的 Three.js 程序至少包括 渲染器、場景、照相機、以及場景中創建的物體。

• three.js 支持多種渲染器, 其中主要的為 CanvasRenderer 和 WebGLRenderer; 設置渲染器的代碼一般包括: 用 new Renderer() 來新建一個WebGL渲染器, renderer.setSize(width,height) 來設置渲染器的寬高(或者給 canvas 元素設定寬高, 注意 CSS 指定是無效的且 canvas 元素有默認寬高值), 用 renderer.setClearColor(clearColor,clearAlpha) 設置 canvas 背景色與透明度, 用 renderer.render() 操作渲染繪製過程;
• 我們需要渲染的物體在初始化之後需要添加到場景(Scene)中, 場景提供了添加/刪除物體的方法, 同時也涵蓋添加霧效果以及材質覆蓋等方法; 在場景和相機都設置好的情況下, 只要將 scene 和 camera 交給 Three.js 的 Renderer ，渲染操作就開始了;
• 照相機分為兩種, 使用透視投影照相機獲得的結果是類似人眼在真實世界中看到的有「近大遠小」的效果（如下圖左圖）；而使用正交投影照相機獲得的結果就像我們在數學幾何學課上老師教我們畫的效果，對於在三維空間內平行的線，投影到二維空間中也一定是平行的（如下圖中右圖）

@PerspectiveCamera https://threejs.org/docs/index.html#api/cameras/PerspectiveCameran@OrthographicCamera https://threejs.org/docs/index.html#api/cameras/OrthographicCameranTHREE.OrthographicCamera(left, right, top, bottom, near, far)nTHREE.PerspectiveCamera(fov, aspect, near, far)n

• 在創建物體時，需要傳入兩個參數，一個是幾何形狀（Geometry），另一個是材質（Material）。

坐標系

Three.js 採用右手坐標系, 如下圖所示:

矩陣變換

在三維圖形學中,幾何變換大致分為三種,平移變換(Translation),縮放變換(Scaling),旋轉變換(Rotation).

• 矩陣 - opengl-tutorial
• Matrix4 - three.js
• 三維頂點為三元組(x,y,z),引入一個新的分量w，得到向量(x,y,z,w): 若w=1，則向量(x, y, z, 1)為空間中的點;若w=0，則向量(x, y, z, 0)為方向;
• 三維圖形學中我們只用到4x4矩陣，它能對頂點(x,y,z,w)作變換。這一變換是用矩陣左乘頂點來實現的：矩陣*頂點= 變換後的頂點;
• 將三維空間中的一個點 [x, y, z, 1] 移動到另外一個點 [x, y, z, 1] ，三個坐標軸的移動分量分別為 dx=Tx, dy=Ty, dz=Tz;
• 平移變換矩陣的逆矩陣與原來的平移量相同但是方向相反;
• 旋轉變換矩陣的逆矩陣與原來的旋轉軸相同但是角度相反;
• 縮放變換的逆矩陣正好和原來的效果相反，如果原來是放大，則逆矩陣是縮小，如果原來是縮小，則逆矩陣是放大;
• 累積變換的順序: 先縮放,接著旋轉,最後平移;

TransformedVector = TranslationMatrix * RotationMatrix * ScaleMatrix * OriginalVector;n

Geometry 幾何形狀類型匯總

Geometry#Three.js 是所有幾何形狀的基類, 用戶也可以操作繼承該類用於自定義形狀的定義和繪製, 常見的 Three.js 中幾何形狀包括立方體,柱體,球體等等.

• BoxGeometry 是四邊形幾何類, 它通常用給定的長寬高參數構造立方體或不規則四邊形(CubeGeometry 也可以實現相同效果,但在 Three.js 中該函數已被刪除);

THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)n

• PlaneGeometry 是平面類, 其實是一個長方形，而不是數學意義上無限大小的平面;

THREE.PlaneGeometry(width, height, widthSegments, heightSegments)n

• SphereGeometry 是球體類, 構造函數如下所示 ( radius 是半徑； segmentsWidth 表示經度上的切片數； segmentsHeight 表示緯度上的切片數； phiStart 表示經度開始的弧度； phiLength 表示經度跨過的弧度； thetaStart 表示緯度開始的弧度； thetaLength 表示緯度跨過的弧度), 其中需要注意的是在使用時可以根據經緯度切片數來定製球形外形, 可以通過經緯度弧度來定製球形起始形狀;

THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)n

• CircleGeometry 幾何類可以創建圓形或者扇形;

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)n

• CylinderGeometry 表示柱體類, 構造函數如下所示( radiusTop 與 radiusBottom 分別是頂面和底面的半徑，由此可知，當這兩個參數設置為不同的值時，實際上創建的是一個圓台； height 是圓柱體的高度； radiusSegments 與 heightSegments 可類比球體中的分段； openEnded 是一個布爾值，表示是否沒有頂面和底面，預設值為false，表示有頂面和底面);

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)n

• TetrahedronGeometry / 正四面體、OctahedronGeometry / 正八面體、IcosahedronGeometry / 正二十面體的構造函數分別如下所示;

THREE.TetrahedronGeometry(radius, detail)nTHREE.OctahedronGeometry(radius, detail)nTHREE.IcosahedronGeometry(radius, detail)n

• TorusGeometry 即圓環面, 也為甜甜圈的形狀;

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)n

• TorusKnotGeometry / 圓環結, 形如打了結的甜甜圈;

THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)n

• ExtrudeGeometry 幾何類, 用於從一條路徑中抽取出特徵用於構建幾何形狀;

THREE.ExtrudeGeometry(shapes, options)n

• ConeGeometry 錐形幾何類;

THREE.ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)n

• Three.js 還提供了很多其他幾何類, 詳情可以在 Three.js 文檔搜索框中輸入 Geometry 關鍵字, 查看 Geometries 下欄目.

其他: 光與影

• three.js 中常用的四種光源模型為環境光、平行光、點光源、聚光燈;
• 在Three.js中，能形成陰影的光源只有THREE.DirectionalLight與THREE.SpotLight；而相對地，能表現陰影效果的材質只有THREE.LambertMaterial與THREE.PhongMaterial。因而在設置光源和材質的時候，一定要注意這一點;

參考

• three.js / docs
• Three.js 入門指南
• three.js右手坐標系， 顯示和線條
• Intro to WebGL with Three.js

原文地址: Three.js 入門與掃盲-基礎結構,坐標系與幾何類型介紹