Three.js 是一個(gè) 3D JavaScript 庫(kù)
首先認(rèn)識(shí)下關(guān)鍵字
- 渲染器（Renderer）
- 場(chǎng)景（Scene）
- 照相機(jī)（Camera）
- 網(wǎng)格 (Mesh）
常用的渲染器有：WebGLRenderer和CanvasRenderer
WebGL渲染效果贸呢、性能逗比CanvasRenderer 好
CanvasRenderer則具有更好的兼容性闷供。
添加的物體都添加到場(chǎng)景（Scene）中
1.照相機(jī)（Camera）
- 正交投影照相機(jī)（Orthographic Camera）
-
透視投影照相機(jī)（Perspective Camera）
image.png
- 正交投影照相機(jī) （Orthographic Camera）
不會(huì)改變物體的比例
THREE.OrthographicCamera(left, right, top, bottom, near, far)
2.透視投影照相機(jī)（Perspective Camera）的構(gòu)造函數(shù)是：
THREE.PerspectiveCamera(fov, aspect, near, far)
aspect等于width / height
near和far分別是照相機(jī)到視景體最近隶糕、最遠(yuǎn)的距離届宠，均為正值
2.幾何形狀
2.1幾何形狀（Geometry）
材質(zhì)（Material）
- 立方體
THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
- 平面
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
- 球體
THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)
// radius是半徑狐胎；segmentsWidth表示經(jīng)度上的切片數(shù)；
// segmentsHeight表示緯度上的切片數(shù)跟匆；phiStart表示經(jīng)度開(kāi)始的弧度甜害；
// phiLength表示經(jīng)度跨過(guò)的弧度；thetaStart表示緯度開(kāi)始的弧度卑硫；
// thetaLength表示緯度跨過(guò)的弧度徒恋。
segmentsWidth相當(dāng)于經(jīng)度被切成了幾瓣，而segmentsHeight相當(dāng)于緯度被切成了幾層
- 圓形（CircleGeometry）可以創(chuàng)建圓形或者扇形欢伏，其構(gòu)造函數(shù)是：
THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)
- 圓柱體（CylinderGeometry）的構(gòu)造函數(shù)是：
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
//radiusTop與radiusBottom分別是頂面和底面的半徑
//radiusSegments與heightSegments可類(lèi)比球體中的分段入挣；
//openEnded 缺省值為false，表示有頂面和底面硝拧。true為無(wú)
- 正四面體径筏、正八面體、正二十面體
THREE.TetrahedronGeometry(radius, detail)
THREE.OctahedronGeometry(radius, detail)
THREE.IcosahedronGeometry(radius, detail)
- 圓環(huán)面（TorusGeometry）
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
//radius是圓環(huán)半徑障陶；tube是管道半徑滋恬；
//radialSegments與tubularSegments分別是兩個(gè)分段數(shù)，
//arc是圓環(huán)面的弧度抱究，缺省值為Math.PI * 2恢氯。
- 圓環(huán)結(jié)（TorusKnotGeometry）
THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
//heightScale是在z軸方向上的縮放。
2.2 文字形狀
THREE.TextGeometry(text, parameters)
parameters 參數(shù)設(shè)置
- size：字號(hào)大小鼓寺，一般為大寫(xiě)字母的高度
- height：文字的厚度
- curveSegments：弧線(xiàn)分段數(shù)勋拟，使得文字的曲線(xiàn)更加光滑
- font：字體，默認(rèn)是'helvetiker'妈候，需對(duì)應(yīng)引用的字體文件
- weight：值為'normal'或'bold'敢靡，表示是否加粗
- style：值為'normal'或'italics'，表示是否斜體
- bevelEnabled：布爾值苦银，是否使用倒角啸胧，意為在邊緣處斜切
- bevelThickness：倒角厚度
- bevelSize：倒角寬度
2.3 自定義形狀
THREE.Geometry()
3.材質(zhì)
通過(guò)設(shè)置材質(zhì)可以改變物體的顏色赶站、紋理貼圖、光照模式等
3.1 基本材質(zhì)
THREE.MeshBasicMaterial(opt)
- visible：是否可見(jiàn)吓揪，默認(rèn)為true
- side：渲染面片正面或是反面亲怠，默認(rèn)為正面THREE.FrontSide，可設(shè)置為反面THREE.BackSide柠辞，或雙面THREE.DoubleSide
- wireframe：是否渲染線(xiàn)而非面，默認(rèn)為false
- color：十六進(jìn)制RGB顏色主胧，如紅色表示為0xff0000
- map：使用紋理貼圖
3.2 Lambert材質(zhì)
只考慮漫反射而不考慮鏡面反射的效果
THREE.MeshLambertMaterial(opt)
3.3 Phong材質(zhì)
Phong 模型考慮了鏡面反射的效果叭首，因此對(duì)于金屬、鏡面的表現(xiàn)尤為適合
THREE.MeshPhongMaterial(opt)
3.4 法向材質(zhì)
THREE.MeshNormalMaterial(opt)
4.網(wǎng)格
網(wǎng)格是由頂點(diǎn)踪栋、邊焙格、面等組成的物體
Mesh(geometry, material)
5.動(dòng)畫(huà)
每秒幀數(shù) FPS（Frames Per Second），是指每秒畫(huà)
面重繪的次數(shù)夷都。FPS 越大眷唉，則動(dòng)畫(huà)效果越平滑
常用方法：
setInterval(func, msec)
requestAnimationFrame
6.外部模型
7.光與影
7.1環(huán)境光
環(huán)境光沒(méi)有明確的光源位置，在各處形成的亮度也是一致的囤官。
THREE.AmbientLight(hex)
環(huán)境光通常使用白色或者灰色冬阳，作為整體光照的基礎(chǔ)。
7.2 點(diǎn)光源
THREE.PointLight(hex, intensity, distance)
7.3平行光
THREE.DirectionalLight(hex, intensity)
7.4聚光燈
THREE.SpotLight(hex, intensity, distance, angle, exponent)
//angle是聚光燈的張角党饮，缺省值是Math.PI / 3肝陪，最大值是Math.PI / 2；
//exponent是光強(qiáng)在偏離target的衰減指數(shù)（target需要在之后定義刑顺，缺省值為(0, 0, 0)）氯窍，缺省值是10。
學(xué)習(xí)從搬運(yùn)開(kāi)始
