作者：桑榆
QQ：934440653
有問題，評論留言，或qq聯繫
前兩章的尚未整理，後續整理完成，會補上。
第一章 場景
待更新…
第二章 相機
待更新…
第三章 渲染器
1.參數
| ** 名稱 ** | ** 描述 ** |
|---|---|
| antialias | Boolean，默認爲false。是否開啓反鋸齒。 |
| precision | 這個材質使用從攝像機到網格的距離來決定如何給網格上色。 |
| alpha | Boolean，默認爲false。是否可以設置背景色透明。 |
| premultipliedAlpha | Boolean，默認爲true。是否允許渲染器中的顏色具有alpha預乘的效果。 |
| preserveDrawingBuffer | Boolean，默認爲false。是否保存繪圖緩衝，直到手動清除或覆蓋。 |
| stencil | Boolean，默認爲true。繪圖緩衝區是否具有至少8位的模板緩衝區。 |
| depth | Boolean，默認爲true。繪圖緩衝區是否具有至少16位的深度緩衝區。 |
| logarithmicDepthBuffer | Boolean，默認爲false。是否使用對數深度緩衝區。 |
2.屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| .domElement | 用來繪製輸出的Canvas對象。通過構造函數中的渲染器自動創建，添加到網頁中即可。 |
| .context | 從HTML5 canvas 中獲取的用來繪圖的WebGL渲染上下文。 |
| .autoClear | 定義渲染器是否應該在渲染之前自動清除其輸出。 |
| .autoClearColor | Boolean，默認爲true。是否允許渲染器中的顏色具有alpha預乘的效果。 |
| .preserveDrawingBuffer | 如果autoClear爲true，該屬性用來定義渲染器是否需要清除顏色緩存，默認爲true。 |
| .autoClearDepth | 如果autoClear爲true，該屬性用來定義渲染器是否需要清除深度緩存，默認爲true。 |
| .autoClearStencil | 如果autoClear爲true，該屬性用來定義渲染器是否需要清除模板緩存，默認爲true。 |
| .sortObjects | 定義渲染器是否需要對象排序，默認爲true。 注：排序是用來試圖正確的渲染具有一定程度透明度的對象。根據定義，排序對象可能在所有情況下都不工作。根據應用程序的需要，可能需要關閉該排序功能，使用其他方法處理透明渲染，比如手動確定物體的繪製順序。 |
| .localClippingEnabled | 定義渲染器是否考慮對象級別的裁剪平面。默認爲false。 |
| .gammaInput | 所有紋理和顏色是否使用預乘的gamma值來輸入。默認爲false。 |
| .gammaOutput | 所有紋理和顏色是否使用預乘的gamma值來輸出。默認爲false。 |
| .shadowMap | 實現陰影貼圖(或陰影映射)的組件的引用。 |
| .shadowMap.enabled | 是否啓用在場景中的陰影貼圖。默認爲false。 |
| .shadowMap.type | 陰影貼圖類型定義(未經過濾,百分比接近過濾,帶着色器雙線性過濾的百分比接近過濾)。 — 可選值：THREE.BasicShadowMap，THREE.PCFShadowMap，THREE.PCFSoftShadowMap。 |
| — 默認爲THREE.PCFShadowMap。 | |
| .shadowMap.renderReverseSided | 默認爲true。是否將材質所指定的反面渲染到陰影貼圖中。如果禁用，必須在表面光源上設置適當的shadow.bias，可以同時投射和接收陰影以正確渲染。 |
| .shadowMap.renderSingleSided | 默認爲true。是否將指定的材料視爲雙面，而在渲染陰影貼圖時使用正面(front-side)。如果禁用，必須在表面光源上設置適當的shadow.bias，可以同時投射和接受陰影以正確渲染。 |
| .maxMorphTargets | 默認爲8。着色器中允許的最大MorphTargets數量。標準材料只允許8個MorphTargets。 |
| .maxMorphNormals | 默認爲4。着色器中允許的最大MorphNormals數量。標準材料只允許8個MorphNormals。 |
| .info | 關於顯卡內存和渲染過程統計信息的對象。便於調試和分析。該對象包含以下字段：memory(geometries、textures)、render(calls、vertices、faces、points)、programs。 |
3.方法
.getContext( ) — 返回WebGL渲染上下文。
.getContextAttributes — 返回描述WebGL上下文創建時所設置屬性的對象。
.supportsVertexTextures( ) — 返回Boolean值，如果該上下文支持頂點紋理，則爲true。
.getPixelRatio( ) — 返回當前設備的像素比。
.setPixelRatio( value ) — 設置設備像素比。通常用於HiDPI設備防止模糊輸出canvas。
.getSize( ) — 返回包含渲染器輸出canvas寬高的對象，以像素爲單位。
.setSize( width,height,updateStyle ) — 調整輸出canvas尺寸，要考慮設備像素比，並設置視口匹配該尺寸。如果設置updateStyle爲true，則顯示添加像素到輸出canvas的樣式中。
.setViewport( x,y,width,height ) — 設置視口，從(x,y)到(x+width,y+height)。
.setScissor( x,y,width,height) — 設置剪裁區域，從(x,y)到(x+width,y+height)。
(注：setViewport 和 setScissor 方法中的(x,y)是該區域的左下角。該區域被定義從左到右的寬度，以及從底部到頂部的高度。該垂直方向的定義和HTML canvas元素的填充方向相反。)
.setScissorTest( ) — Boolean，啓用或禁用裁剪測試。被激活時，只有裁剪區域內的像素會被進一步的渲染行爲所影響。
.setClearColor( color,alpha ) — 設置清除的顏色和透明度。
.getClearColor( ) — 返回使用當前清除顏色的THREE.Color實例。
.getClearAlpha( ) — 返回使用當前清除透明度的float。範圍 0-1。
.clear( color,depth,stencil ) — 使渲染器來清除其顏色、深度和模板繪製緩衝。該方法初始化顏色緩衝區爲當前清除顏色值。
.renderBufferImmediate( object,program,shading ) — 渲染一個即時緩衝區。被renderImmediateObject所調用。
.renderBufferDirect( camera,lights,fog,material,geometryGroup,object ) — 使用相機和正確的材料渲染緩衝模型組。
.renderBuffer(camera,lights,fog,material,geometryGroup,object) — 使用相機和正確的材料渲染模型組。
.render( scene,camera,renderTarget,forceClear ) — 使用相機渲染一個場景。
.readRenderTargetPixels( renderTarget,x,y,width,height,buffer ) — 從渲染目標中讀取像素數據到給定的緩衝區中。緩存應該是一個js Uint8Array對象，通過new Uint8Array( renderTargetWidth * renderTargetWidth * 4 )來實例化，考慮大小和顏色信息。
.renderImmediateObject( camera,lights,fog,material,object ) — 使用相機渲染即時對象。
.setFaceCulling( cullFace,frontFace ) — 用於設定GPU中gl的fontFace和cullFace狀態，從而啓用或禁用渲染時的面剔除。
.setTexture( texture,slot ) — 設置正確的紋理爲webgl着色器的正確插槽。插槽可以作爲一個值的均勻的採樣。
.setRenderTarget( renderTarget ) — 設置當前渲染目標。如果參數被忽略，設置繪製的canvas爲當前渲染目標。
.supportsCompressedTextureS3TC( ) — 如果WebGL支持S3TC格式的紋理壓縮，返回true。
.getMaxAnisotropy( ) — 返回紋理的各向異性水平。
.getPrecision( ) — 獲取着色器作用精度，返回 highp / mediump / lowp。
.clearTarget( renderTarget,color,depth,stencil ) — 清除渲染目標。
4.常用的render
var renderer=new THREE.CanvasRenderer(); 幾何級別的渲染，兼容性更好
var renderer=new THREE.WebGLRenderer(); 像素級的渲染，渲染效果更好
第四章 光源
選擇“license server” 輸入：http://idea.imsxm.com/
一、光源的種類
| ** 名稱 ** | ** 描述 ** |
|---|---|
| AmbientLight（自然光） | 光源的顏色將會影響全局的每一個物體每一個面的顏色。該光源沒有特別得來源方向，也不會產生陰影。 |
| PointLight（點光源） | 這個材質使用從攝像機到網格的距離來決定如何給網格上色。 |
| SpotLight（聚光燈光源） | 這是一種簡單的材質，根據法向向量計算物體表面的顏色。 |
| DirectionalLight（平行光源） | 這是一個容器，可以爲幾何體的各個表面指定不同的材質。 |
| HemisphereLight（半球光光源） | 這是一種考慮光照影響的材質，用於創建暗淡的、不光亮的物體。 |
| AreaLight（面光源） | 這是一種考慮光照影響的材質，用於創建光亮的物體。 |
| LensFlare（鏡頭炫光） | 這種材質允許使用自定義的着色器程序，直接控制頂點的放置方式以及像素的着色方式。 |
二、基礎光源
THREE.Color對象
當構建THREE.Color(color)對象時，color可以用十六進制字符串（#cccccc）或者十六進制數值。然而，在構想構造好後如果需要改變顏色，就不得不創建一個新的THREE.Color對象或者修改當前THREE.Color對象的內部屬性。THREE.Color提供的函數包括:
函數名/描述
set(value)/將當前顏色改成指定的十六進制值。可以是字符串，也可以是數字
setHex(value)/將當前顏色指定爲十六進制數值
setRGB(r, g, b)/根據提供的RBG設置顏色。參數範圍0到1
setHSV(h, s, v)/根據提供的HSV值設置顏色。參數的範圍從0到1
setStyle(color)/根據CSS值設置顏色
copy(color)/從提供的顏色對象複製顏色值到當前對象
convertGamaToLinear(color)/將當前顏色從伽馬色彩空間轉換到線性色彩空間
convertLinearToGamma(color)/將當前顏色從線性色彩空間轉換到伽馬色彩空間
getHex()/以十六進制形式從顏色對象中獲取顏色值
getHexString()/以十六進制字符串形式從顏色對象中獲取顏色值
getStyle()/以CSS值得形式從顏色對象獲取顏色值
getHSV()/以HSV形式從顏色對象中獲取顏色值
addColor(color)/將提供的顏色添加到當前顏色上
clone()/複製當前顏色
2.1 AmbientLight
1.參數
var light = new THREE.AmbientLight( color : Integer, intensity : Float, distance : Number, decay : Float )
2.屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| color | 光源的顏色 |
| intensity | 光源的強度 |
| distance | 光的照射距離 |
| decay | 光的衰減指數 |
| visible | (是否可見)/如果設爲true，該光源就會打開；如果設置爲false，改光源就會關閉 |
| position | (位置)/光源所在的位置 |
2.1 PointLight
1.參數
var light = new THREE.PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
2.屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| color | 光源的顏色 |
| intensity | 光源的強度 |
| distance | 光的照射距離 |
| decay | 光的衰減指數 |
| visible | (是否可見)/如果設爲true，該光源就會打開；如果設置爲false，改光源就會關閉 |
| position | (位置)/光源所在的位置 |
2.1 SpotLight
1.參數
var light = new THREE.SpotLight( color : Integer, intensity : Float, distance : Number, decay : Float )
2.屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| castShadow | (投影)/如果設置爲true,光源生成陰影 |
| target | 決定光源的方向 |
| angle | (角度)/光源射出的光柱有多寬。單位爲弧度，默認值是Math.PI/3 |
| exponent | 光強衰減指數。使用 THREE.SpotLight 光源，發射的光線的強度隨着光源距離的增加而減弱。exponent 屬性決定了光線強度遞減的速度。使用低值，從光源發出的光線將到達遠處的物體，而使用高值，光線僅能到達非常接近 T |
| onlyShadow | 僅陰影。如果此屬性設置爲 true，則該光源只生成陰影，而不會在場景中添加任何光照。 |
| shadow.bias | 用來偏置陰影的位置。當你使用非常薄的對象時，可以使用它來解決一些奇怪的效果。如果你看到奇怪的陰影效果，將該屬性設置爲很小的值（例如 0.01）通常可以解決問題。此屬性的默認值爲 0。 |
2.1 DirectionalLight
1.參數
var light = new THREE.DirectionalLight( color : Integer, intensity : Float, distance : Number, decay : Float )
2.屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| position | 光源在場景中的位置。 |
| target | 光源指向場景中的特定對象或位置 |
| intensity | 光源照射的強度。默認值：1 |
| castShadow | 投影。如果設置爲 true，這個光源就會生成陰影 |
| onlyShadow | 僅陰影。如果此屬性設置爲 true，則該光源只生成陰影，而不會在場景中添加任何光照 |
| shadow.map.height和shadow.map.width | 陰影映射寬度和陰影映射高度。決定了有多少像素用來生成陰影。當陰影具有鋸齒狀邊緣或看起來不光滑時，可以增加這個值。在場景渲染之後無法更改。兩者的默認值均爲：512 |
2.5調試射線
//調試用射線顯示
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.left = -200;
directionalLight.shadow.camera.right = 200;
directionalLight.shadow.camera.top = 300;
directionalLight.shadow.camera.bottom = -200;
var helper = new THREE.CameraHelper(directionalLight.shadow.camera, 5);
scene.add(directionalLight, helper);
三、特殊光源
第五章 材質
一、屬性
材質的種類
| ** 名稱 ** | ** 描述 ** |
|---|---|
| MeshBasicMaterial（網格基礎材質） | 基礎材質，用於給幾何體賦予一種簡單的顏色，或者顯示幾何體的線框。 |
| MeshDepthMaterial（網格深度材質） | 這個材質使用從攝像機到網格的距離來決定如何給網格上色。 |
| MeshNormalMaterial（網格法向材質） | 這是一種簡單的材質，根據法向向量計算物體表面的顏色。 |
| MeshFaceMaterial（網格面材質） | 這是一個容器，可以爲幾何體的各個表面指定不同的材質。 |
| MeshLambertMaterial（網格 Lambert 材質） | 這是一種考慮光照影響的材質，用於創建暗淡的、不光亮的物體。 |
| MeshPhongMaterial（網格 Phong 式材質） | 這是一種考慮光照影響的材質，用於創建光亮的物體。 |
| ShaderMaterial（着色器材質） | 這種材質允許使用自定義的着色器程序，直接控制頂點的放置方式以及像素的着色方式。 |
| LineBasicMaterial（直線基礎材質） | 這種材質可以用於 THREE.Line（直線）幾何體，用來創建着色的直線。 |
| LineDashMaterial（虛線材質） | 這種材質與 LineBasicMaterial（直線基礎材質）一樣，但允許創建出一種虛線的效果。 |
-
THREE.MeshBasicMaterial 基礎網格材質
color
wireframe
wireframeLinewidth
wireframeLinecap：線段端點如何顯示。可選值有：butt（平）、round、square。默認是round。WebGLRenderer對象不支持該屬性。
wireframeLinejoin：線段連接點如何顯示。可選值有：round、bevel（斜角）、miter（尖角）。默認是round。WebGLRenderer對象不支持屬性。
shading：着色模式。可選值：THREE.SmoothShading、THREE.FlatShading。
vertexColors：爲每個頂點定義不同的顏色。在CanvasRenderer對象中不起作用。
fog：指示當前是否會受全局霧化效果設置的影響。
1.1 基礎屬性
這些屬性是最常用的。通過這些屬性，可以控制物體的不透明度、是否可見以及如何被引用（通過 ID 或者自定義名稱）。
| ** 名稱 ** | ** 描述 ** |
|---|---|
| id（標識符） | 用來識別材質，並在材質創建時賦值。第一個材質的值從 0 開始，每新加一個材質，這個值就增加 1。 |
| uuid（通用唯一識別碼） | 這是生成的唯一 ID，在內部使用。 |
| name（名稱） | 可以通過這個屬性賦予材質名稱，用於調試的目的。 |
| opacity（不透明度） | 定義物體的透明度。與 transparent 屬性一起使用。該屬性的賦值範圍從 0 到 1。 |
| transparent（是否透明） | 如果該值設置爲 true，Three.js 會使用指定的不透明度渲染物體。如果設置爲 false，這個物體就不透明（只是着色更明亮些）。如果使用 alpha（透明度）通道的紋理，該屬性應該設置爲 true。 |
| overdraw（過度描繪） | 當你使用 THREE.CanvasRender 時，多邊形會被渲染得稍微大一點。當使用這個渲染器渲染的物體有間隙時，可以將這個屬性設置爲 true。 |
| visible（是否可見） | 定義該材質是否可見。如果設置爲 false,那麼在場景中就看不到該物體。 |
| side（側面） | 通過這個屬性，可以定義幾何體的哪一面應用材質。默認值爲 THREE.FrontSide（前面），這樣可以將材質應用到物體的前面（外側）。也可以將其設置爲 THREE.BackSide（後面），這樣可以將材質應用到物體的後面（內側）。或者也可以將它設置爲 THREE.DoubleSide（雙側），可將材質應用到物體的內外兩側。 0=THREE.FrontSide正面顯示 1=THREE.BackSide背面顯示 2= THREE.DoubleSide雙側顯示 |
| needsUpdate（是否更新） | 對於材質的某些修改，你需要告訴 Three.js 材質已經改變了。如果該屬性設置爲 true，Three.js會使用新的材質屬性更新它的緩存。 |
| ** 屬性 ** | ** 描述 ** |
|---|---|
| color | 設置材質的顏色 |
| wireframe | 是否將材質渲染成線框 |
| wireframeLinewidth | 如果設置了wireframe的值，則該屬性則設置了線框的寬度，即線框的寬度 |
| wireframeLinecap（線框的端點） | 該屬性定義了線框模式下端點的顯示方式，有butt平，round圓，square方，但是在實際的應用中，該值很難看出效果，而且webglrenderer不支持該屬性 |
| wireframeLinejoin（線框線段連接點） | 定義線段的連接點如何顯示，webglrenderer不支持該屬性 |
| shading（着色方式） | THREE.SmoothShading平滑着色，和THREE.FlatShading平面着色，平面着色的話，每個面是什麼顏色就會被渲染成什麼顏色，而平滑着色的話可以使物體的表面看起來變的更光滑一些 |
| vertexColors（頂點顏色） | 可以通過該屬性爲每一個頂點定義不同的顏色，但是canvasRenderer不支持 |
| fog（霧化） | 當前材質是否會受全局霧化效果的影響 |
| side（面） | 該屬性可以指定幾何體的哪個面應用了材質，由於材質多應用於物體前面的面上，所以當旋轉的時候，會有一部分時間是不可見的（其實是物體背面沒有應用材質）side屬性的值有front(只有物體的前面應用材質)和double（前後都應用材質） |
2.2 融合屬性
每個物體都有一系列的融合屬性。這些屬性決定了物體如何與背景融合。
| ** 名稱 ** | ** 描述 ** |
|---|---|
| blending（融合） | 該屬性決定物體上的材質如何與背景融合。一般的融合模式是 THREE.NormalBlending，在這種模式下只顯示材質的上層。。 |
| blendsrc（融合源） | 除了使用標準融合模式之外，還可以通過設置 blendsrc、 blenddst 和 blendequation 來創建自定義的融合模式。這個屬性定義了該物體（源）如何與背景（目標）相融合。默認值爲 THREE.SrcAlphaFactor，即使用 alpha(透明度）通道進行融合。 |
| blenddst（融合目標） | 這個屬性定義了融合時如何使用背景（目標），默認值爲 THREE.OneMinusSrcAlphaFactor，其含義是目標也使用源的 alpha 通道進行融合，只是使用的值是 1（源的 alpha 通道值）。 |
| blendequation（融合公式） | 定義瞭如何使用 blendsrc 和 blenddst 的值。默認值爲使它們相加（AddEquation）。通過使用這三個屬性，可以創建自定義的融合模式。 |
3.高級屬性
這些高級屬性可以控制底層 WebGL 上下文對象渲染物體的方式。不過大多數情況下是不需要使用這些屬性的。
| ** 名稱 ** | ** 描述 ** |
|---|---|
| depthTest | 這是一個高級 WebGL 屬性。使用這個屬性可以打開或關閉 GL_DEPTH_TEST 參數。此參數控制是否使用像素深度來計算新像素的值。通常情況下不必修改這個屬性。更多信息可以在 OpenGL 規範中找到。 |
| depthWrite | 這是另外一個內部屬性。這個屬性可以用來決定這個材質是否影響 WebGL 的深度緩存。如果你將一個物體用作二維貼圖（例如一個套子），應該將這個屬性設置爲 false。但是，通常不應該修改這個屬性。 |
| polygonOffset polygonOffsetFactor polygonOffsetUnits | 通過這些屬性，可以控制 WebGL 的 POLYGON_OFFSET_FILL 特性。一般不需要使用它們。有關這些屬性具體做什麼的解釋，可以參考 OpenGL 規範。 |
| alphatest | 可以給這個屬性指定一個值（從 0 到 1）。如果某個像素的 alpha 值小於該值，那麼該像素不會顯示出來。可以使用這個屬性移除一些與透明度相關的毛邊。 |
二、簡單網絡材質
2.1 MeshBasicMaterial
1.簡介
MeshBasicMaterial是一種非常簡單的材質，這種材質不考慮場景中光照的影響。使用這種材質的網格會被渲染成簡單的平面多邊形，而且也可以顯示幾何體的線框。
2.設置屬性
Three.js除了可以設置共有的屬性外，還可以設置以下屬性：
| ** 名稱 ** | ** 描述 ** |
|---|---|
| color（顏色） | 設置材質的顏色 |
| wireframe（線框） | 設置這個屬性的可以將材質渲染成線框，非常適合調試 |
| wireframeLinewidth（線框寬度） | 如果已經打開了wirefreme，這個屬性定義線框中線的寬度 |
| wireframeLinecap（線框線段端點） | 這個屬性定義了線框模式下頂點鍵線段的端點如何顯示。可選的值包括butt（平）、round（圓）和square（方）。默認值爲round。在實際使用中，這個屬性的修改結果很難看出來。WebGLRenderer對象不支持該屬性。 |
| wireframeLinejoin（線框線段連接點） | 這個屬性定義了線段的連接點如何顯示。可選的值有round（圓）、bevel（斜角）和miter（尖角）。默認值爲round。如果你在一個使用低透明度和wireframeLinewidth值很大的例子裏靠近觀察，就可以看到這個屬性的效果。WebGLRenderer對象不支持該屬性 |
| shading（着色） | 該屬性定義如何着色。可選的值有THREE.SmoothShading、THREE.NoShading和THREE.FlatShading。默認值爲THREE.SmoothShading，這將產生一個平滑的對象，看不到單個面 |
| vertexColors（頂點顏色） | 可以通過這個屬性給每個頂點定義不同的顏色。默認值爲THREE.NoColors。如果將這個值設置爲THREE.VertexColors，渲染器會採用THREE.Geometry對象的colors屬性的值。該屬性對象CanvasRenderer不起作用，但對WebGLRenderer起作用 |
| fog（霧化） | 該屬性指定當前材質是否受全局霧化效果設置的影響。默認true，如果設置爲false，將不會受霧化的影響 |
3.使用案例
直接按照上一節的的兩種方法中的一種方法創建實例化對象，設置相關屬性即可。
var meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});
2.2 MeshDepthMaterial
1.簡介
使用THREE.MeshDepthMaterial材質的物體，其外觀不是由光照或某個材質屬性決定的，二十有物體到攝像機的距離決定的。可以將這種材質與其他材質結合使用，從而很容易地創建出逐漸消失的效果。
使用THREE.MeshDepthMaterial材質的物體，其外觀不是由光照或某個材質屬性決定的，二十有物體到攝像機的距離決定的。可以將這種材質與其他材質結合使用，從而很容易地創建出逐漸消失的效果。
攝像機的near屬性和far屬性之間的距離決定了場景的亮度和物體消失的速度。如果這個距離非常大，那麼當物體遠離攝像機時，只會稍微消失一點。如果這個距離非常小，那麼物體消失的效果會非常明顯。
2.相關屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| wireframe | 該屬性指定是否顯示線框 |
| wireframeLineWidth | 該屬性指定線框線的寬度 |
相機與物體距離小於near，不會顯示出來；相機與物體距離大於far屬性，物體落在相可視範圍之外。物體與相機距離小於near，消失快；物體遠離相機的過程中會一點點消失。
2.3 聯合材質
//獲取亮度
var cubeMaterial = new THREE.MeshDepthMaterial();
//獲取顏色
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending});
meshMaterial = [colorMaterial, cubeMaterial];
// 定義 cube 網格
cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, meshMaterial);
cube.children[1].scale.set(0.99, 0.99, 0.99); // 縮小 cubeMaterial 的網格對象，避免閃爍問題
註解：MeshBasicMaterial() ,必須transparent: true
指定 blending 屬性融合模式爲 THREE.MultiplyBlending
利用 THREE.SceneUtils.createMultiMaterialObject() 方法把前兩種材質結合起來創建一種組合材質網格。其原理比較簡單，這個方法創建時，會生成一個網格組，即一個網格採用 MeshDepthMaterial 材質，另一個網格採用 MeshBasicMaterial 材質，兩個網格完全相同，只是材質不同而已。
2.4 MeshNormalMaterial
2.5 MeshFaceMaterial
- 定義：新版 three.js 中已經不存在這種材質了，因爲原則上來講，舊版中的 MeshFaceMaterial 材質其實就是一個材質數組。舉個例子，假如我們在場景中加入一個立方體，這個立方體上有六個面，你可以通過定義一個長度爲六的材質數組來爲每一個面單獨指定一種材質（比如不同的顏色）即可。
//實例
var matArray = [];
matArray.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
matArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
matArray.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
matArray.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
matArray.push(new THREE.MeshBasicMaterial({color: 0xc41e3a}));
matArray.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
var cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), matArray);
-
三、高級材質
3.1 MeshLambertMaterial
1.簡介
- 這種材質可以用來創建暗淡的並不光亮的表面。
- 無光澤表面的材質，無鏡面高光。
- 這可以很好地模擬一些表面（如未經處理的木材或石頭），但不能用鏡面高光（如上漆木材）模擬光澤表面。
- 該材質非常易用，而且會對場景中的光源產生反應。
- 可以配置的前面的提高的屬性：color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors和fog。
- 相關屬性
| ** 名稱 ** | ** 描述 ** |
|:----|:----?:----|:----?
| ambient（環境色） | 這是材質的環境色。它跟上一章講過的環境光源一起使用。這個顏色會與環境光提供的顏色相乘。默認值爲白色。 |
| emissive（發射的） | 這是該材質的發射的顏色。它其實並不像一個光源，只是一種純粹的、不受其它光照影響的顏色。默認值爲黑色 |
| wrapAround | 如果這個屬性設置爲true，則啓動半lambert光照技術。有了它，光下降得更微妙。如果網格有粗糙、黑暗的地區，啓用此屬性陰影將變得柔和並且分不更加均勻 |
| wrapRGB | 當wrapAround屬性設置爲true時，可以使用THREE.Vector3來控制光下降得速度 |
3.簡單使用
直接實例化一個THREE.MeshLambertMaterial的對象
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});//實例化一個藍色的材質
3.2 MeshPhongMaterial
1.簡介
通過它可以創建一種光亮表面的材質效果。這種材質的屬性基本跟 MeshLambertMaterial 暗淡材質一樣，除此之外，我們列出 MeshPhongMaterial 材質中比較感興趣的特有屬性。
2.相關屬性
| ** 屬性 ** | ** 描述 ** |
|---|---|
| ambient （環境光顏色） | 同 MeshLambertMaterial 材質 |
| emissive （自發光顏色） | 同 MeshLambertMaterial 材質 |
| specular （鏡面反射光顏色） | 此屬性指定該材質的鏡面反射光部分的顏色。如果將它設置成跟 color 屬性相同的顏色，則會得到一種更加類似金屬的材質；如果設置成 gray 灰色，材質將變得像塑料 |
| shininess （鏡面反射光強度） | 此屬性指定 specular 鏡面反射光部分的亮度。默認值是 30 |
3.3 ShaderMaterial
1.簡介
通過它，可以定義自己的着色器，直接在 WebGL 環境中運行。着色器可以將 three.js 中的 JavaScript 對象轉換爲屏幕上的像素。通過這些自定義的着色器，你可以明確指定你的對象如何渲染及遮蓋，或者修改 three.js 庫中的默認值。
接下來我們先看看 ShaderMaterial 可以設置的幾個常用屬性，大部分跟其他基礎材質類似，有wireframe、wireframeLinewidth、flatShading、fog、vertexColors 等。
特別提一下vertexColors 屬性，我們可以通過它爲每一個頂點定義不同的顏色。它在 CanvasRenderer 下不起作用，只在 WebGLRenderer 下起作用。關於此屬性可以參考後面提到的關於 LineBasicMaterial 的例子。
出上面提到的這些屬性外，ShaderMaterial 還有幾個特別的屬性，使用它們你可以傳入數據，定製你的着色器。但它們看起來不好理解，需要結合“GLSL 着色器語言”的相關知識，如下表所示：
2.相關屬性
| ** 屬性 ** | ** 描述 ** |
|---|---|
| fragmentShader （像素着色器） | 這個着色器定義的是每個傳入的像素的顏色 |
| vertexShader （頂點着色器） | 這個着色器允許你修改每一個傳入的頂點的位置 |
| uniforms （統一值） | 通過這個屬性可以向你的着色器發信息。同樣的信息會發到每一個頂點和片段 |
| defines | 這個屬性的值可以轉成 vertexShader 和 fragmentShader 裏的 #define 代碼。該屬性可以用來設置着色器程序裏的一些全局變量 |
| attributes | 這個屬性可以修改每個頂點和片段。通常用來傳遞位置數據與法向量相關的數據。如果要用這個屬性，那麼你要爲幾何體中的所有頂點提供信息 |
| lights | 這個屬性定義光照數據是否傳遞給着色器。默認值是 false |
其中，最重要的部分就是：如果想要使用 ShaderMaterial 材質，就必須傳入兩個不同的着色器：
-
vertexShader：它會在幾何體的每一個頂點上執行。可以用這個着色器通過改變頂點的位置來對幾何體進行變換；
-
fragmentShader：它會在幾何體的每一個像素上執行。在 vertexShader 裏，我們會返回這個特定像素應該顯示的顏色；
到目前爲止，我們討論過的所有材質，three.js 庫都會提供相應的 vertexShader 和 fragmentShader ，不必我們自己去定義。
3.4 線性幾何體材質
- THREE.LineBasicMaterial用於繪製線段的基礎材質。
(注:CanvasRenderer支持linewidth屬性，WebGLRenderer不支持)
相關屬性
| ** 名稱 ** | ** 描述 ** |
|---|---|
| color | 該屬性設置材質的顏色，如果設置了vertexColors，這是屬性將被忽略 |
| linewidth | 設置線的寬度，默認值爲1.0 |
| linecap | 這個屬性定義了線框模式下頂點間線段的端點如何顯示。可選的值包括butt（平）、round（圓）和square（方）。默認值爲round。在實際使用中，這個屬性的修改結果很難看出來。WebGLRenderer對象不支持該屬性 |
| linejoin | 這個屬性定義了線段的連接點如何顯示。可選的值有round（圓）、bevel（斜角）和miter（尖角）。默認值爲round。如果你在一個使用低透明度和很大wireframeLinewidth值的例子裏靠近觀察，就可以看到這個屬性的效果。WebGLRenderer對象不支持該屬性 |
| vertexColors | 將這個屬性設置成THREE.VertexColors值，就可以給每個頂點指定一種顏色 |
| fog | 該屬性指定當前材質是否受全局霧化效果設置的影響 |
簡單使用
var material = new THREE.LineBasicMaterial( {
color: 0xffffff,
linewidth: 1,
linecap: 'round',
linejoin: 'round'
} );
2.LineDashedMaterial：跟 LineBasicMaterial 基本一樣，但是通過指定短劃線和間隔長度，可以創建出虛線效果；LineDashedMaterial 材質的線型是虛線而已。除了跟 LineBasicMaterial 擁有相同的屬性外，它還有以下幾個獨特的屬性：
| ** 屬性 ** | ** 描述 ** |
|---|---|
| scale （縮放比例） | 縮放 dashSize 和 gapSize。如果 scale 小於 1，dashSize 和 gapSize 就會增大；反之，就會縮小 |
| dashSize （短劃線長度） | 定義虛線短劃線的長度 |
| gapSize （間隔長度） | 定義虛線間隔的長度 |
用法跟 LineBasicMaterial 基本一樣，如下所示：
lines.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 0.6,
gapSize: 0.2,
scale: 1.0 // 比例越大，虛線越密；反之，虛線越疏
});
唯一的區別就是，必須調用方法 computeLineDistances()。如果不調用，就不會顯示出虛線效果。
var lines = new THREE.Geometry();
lines.computeLineDistances(); // 必須調用，否則不會有虛線效果
第六章 幾何體
一、二維幾何體
1.1 PlaneGeometry
var plane = new THREE.PlaneGeometry(width,height,widthSegments,heightSegments);
width: 必須，矩形寬度
height:必須，矩形高度
widthSegments:可選，指定矩形的寬度應該劃分成幾段。
heightSegments:可選，指定矩形的高度應該劃分成幾段。
二維圖形爲(x-y平面)——>(x-z)：mesh.rotation.x = -Math.PI/2; 網絡模型沿x軸，向後旋轉1/4圈(-PI/2)
<script>
function init() {
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerWidth, 1, 10000);
var webGlRenderer = new THREE.WebGLRenderer();
webGlRenderer.setSize(window.innerWidth, window.innerHeight);
webGlRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGlRenderer.shadowMapEnabled = true;
//創建一個平面
var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));
scene.add(plane);
camera.position.x = -20;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(10, 0, 0));
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
document.getElementById('webGl-layOut').appendChild(webGlRenderer.domElement);
var controls = new function () {
//平面的寬高
this.width = plane.children[0].geometry.parameters.width;
this.height = plane.children[0].geometry.parameters.height;
//平面寬高分割片段數
this.widthSegments = plane.children[0].geometry.parameters.widthSegments;
this.heightSegments = plane.children[0].geometry.parameters.heightSegments;
//重新定義
this.redraw = function () {
scene.remove(plane);
//又重新新建一個
plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height, Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
scene.add(plane);
}
}
var gui = new dat.GUI();
gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
gui.add(controls,"widthSegments",1,12).onChange(controls.redraw);
gui.add(controls,"heightSegments",1,12).onChange(controls.redraw);
//聯合材質
function createMesh(geom) {
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
//顯示線框
wireFrameMat.wireframe = true;
var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return plane;
}
//開始渲染
render();
var step = 0;
function render() {
stats.update();
plane.rotation.y = step += 0.01;
requestAnimationFrame(render);
webGlRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("stats-layOut").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
1.2 CircleGeometry
基本屬性：
radius：可選。默認50。
segments：可選。定義創建圓時所用的面的數量。最少3個，默認8個。值越大，越光滑。
thetaStart：可選。取值範圍：0-2*PI ，默認是0
thetaLength：可選。默認2PI，表示圓要畫多大，0.5PI表示1/4圓。
new THREE.CircleGeometry(3,12);//半徑3，12個三角形組成的圓
new THREE.CircleGeometry(3,12,0,Math.PI);//半圓
1.3 RingGeometry
1.屬性
| ** 屬性 ** | ** 描述 ** |
|---|---|
| innerRadius | 圓環面內圓半徑,默認初始化爲0 |
| outerRadius | 圓心到圓弧，圓環面外圓半徑,默認初始化爲50 |
| thetaSegments | 圓環面圓周上的細分線(對角線段)段數,代表了圓環的圓度,最低的是3。默認值是8，數值越大越平滑 |
| phiSegments | 圓環面內圓到外圓方向上的細分線段數,最低的是1。默認值是8，由圓心到圓弧的分塊，數值越大，圓面分塊越多。 |
| thetaStart | 圓環面的起始角度,默認初始化爲0 |
| thetaLength | 圓環面圓周弧長,默認初始化爲Math.PI * 2 |
1.4 ShapeGeometry:自定義
1.屬性
| ** 函數名 ** | ** 描述 ** |
|---|---|
| moveTo(x, y) | 將繪圖點移動到指定的 x、y 座標處 |
| lineTo(x, y) | 從當前位置（例如 moveTo 設定的位置）畫一條線到指定的 x、y 座標處 |
| quadricCurveTo(cpx, cpy, x, y)（二次曲線） | 此函數爲二次曲線。你可以使用兩種方法來畫曲線：quadricCurveTo 或者 bezierCurveTo。這兩種曲線的不同之處在於指定曲線曲率的方法不一樣，如下圖所示：https://blog.csdn.net/zhulx_sz/article/details/78799529對於二次曲線，除了指定結束點（x, y）外，還需要額外指定一個點（cpx, cpy）來控制曲線的曲率（不用指定起始點，因爲路徑的當前位置就是起始點）；對於三次曲線，除了指定結束點（x, y）外，還需要額外指定兩個點（cpx1, cpy1, cpx2, cpy2）來控制曲線的曲率。 |
| bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)（貝塞爾曲線） | 此函數爲三次曲線。相關說明參考上一行的二次曲線。 |
| splineThru(vector2Array) | 此函數沿着參數指定的座標集合繪製一條光滑的樣條曲線。其參數爲一個 THREE.Vector2 對象數組。 |
| arc(x, y, radius, startAngle, endAngle, clockwise) | 次函數繪製一個圓或者一段弧。x, y 用來指定圓心與當前位置的偏移量。radius 設定圓的大小。而 startAngle 及 endAngle 則用來定義圓弧要畫多長。布爾屬性 clockwise 決定這段弧是順時針畫還是逆時針畫。 |
| absArc(x, y, radius, startAngle, endAngle, clockwise) | 參考 arc 函數。只不過其指定的圓心位置是絕對位置，而不是相對當前位置的偏移量。 |
| ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise) | 參考 arc 函數。只是橢圓可以分別指定 x 軸半徑及 y 軸半徑。 |
| absEllipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise) | 參考 ellipse 函數。只不過其指定的圓心位置是絕對位置，而不是相對當前位置的偏移量。 |
二、三維幾何體
1.1 BoxGeometry 立方體
BoxGeometry(width, height, dept, widthSegments, heightSegments, depthSegments)
屬性
| ** 屬性 ** | ** 描述 ** |
|---|---|
| width | 必選。此屬性定義方塊的寬度。即方塊沿 x 軸方向的長度 |
| height | 必選。此屬性定義方塊的高度。即方塊沿 y 軸方向的長度 |
| depth | 必選。此屬性定義方塊的深度。即方塊沿 z 軸方向的長度 |
| widthSegments | 可選。此屬性定義方塊沿 x 軸方向，將面分成的段數。默認值是 1 |
| heightSegments | 可選。此屬性定義方塊沿 y 軸方向，將面分成的段數。默認值是 1 |
| depthSegments | 可選。此屬性定義方塊沿 z 軸方向，將面分成的段數。默認值是 1 |
1.2 SphereGeometry 球體
SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
- radius：球體半徑
- widthSegments, heightSegments：水平方向和垂直方向上分段數。widthSegments最小值爲3，默認值爲8。heightSegments最小值爲2，默認值爲6。
- phiStart：從x軸開始繪製，水平方向上的起始角,默認值0 ,最大Math.PI * 2
- phiLenght：水平方向上球體曲面覆蓋的弧度，默認Math.PI * 2
- thetaStart : 從y軸開始繪製，垂直方向上的起始角， 默認0 ,最大Math.PI
- thetaLength: 垂直方向是球體曲面覆蓋的弧度，默認值爲Math.PI(整個球體)
| ** 屬性 ** | ** 描述 ** |
|:----|:----?:----|:----?
| radius | 可選。此屬性定義球體的半徑。 |
| widthSegments | 可選。此屬性定義球體豎直（維度）方向上的分段數。默認值是 8，最小值是 3 |
| heightSegments | 可選。此屬性定義球體水平（經度）方向上的分段數。默認值是 6，最小值是 2 |
| phiStart | 可選。此屬性定義從 x 軸的什麼地方開始繪製。取值範圍是 0 到 2π |
| phiLength | 可選。此屬性定義從 phiStart 開始繪製多少。取值範圍是 0 到 2π |
| thetaStart | 可選。此屬性定義從 y 軸的什麼地方開始繪製。取值範圍是 0 到 π |
| thetaLength | 可選。此屬性定義從 thetaStart 開始繪製多少。取值範圍是 0 到 π。一個 π 是整球，0.5*π只繪製上半球 |
1.3 CylinderGeometry 圓柱
| ** 屬性 ** | ** 描述 ** |
|---|---|
| radiusTop | 可選。此屬性定義圓柱體頂部圓半徑。默認值是 20 |
| radiusBottom | 可選。此屬性定義圓柱體底部圓半徑。默認值是 20 |
| height | 可選。此屬性定義圓柱體的高度。默認值是 100 |
| radiusSegments | 可選。此屬性定義圓柱體的上下部的圓截面分成多少段。默認值是 8 |
| heightSegments | 可選。此屬性定義圓柱體豎直方向上分成多少段。默認值是 1 |
| openEnded | 可選。此屬性定義圓柱體的頂部和底部是否爲打開。默認值是 false |
1.4 TorusGeometry 圓環
圓環面（TorusGeometry）的形狀類似甜甜圈，其構造函數是：
THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
SHU
| ** 屬性 ** | ** 描述 ** |
|---|---|
| radius | 圓環半徑，從圓環中心到圓環外呼弧的距離 |
| tube | 管道半徑，管道橫截面的半徑 |
| radialSegments | 徑向的分段數，每管道有多少個面，面數越多，橫截面越遠圓。 |
| tubularSegments | 管的分段數，管道橫截面分段數，段數越短，圓環越圓 |
| arc | 圓環面的弧度，缺省值爲Math.PI * 2 |
1.5 TrusKnotGeometry 環狀扭結
1.屬性
| ** 屬性 ** | ** 描述 ** |
|---|---|
| radius | 可選。設置完整圓環的尺寸，默認是100，整體的放大縮小。 |
| tube | 可選。設置圓環管的半徑。默認值是 40 |
| radiusSegments | 可選。設置圓環長度方向的分成的段數。默認值是 64 |
| tubularSegments | 可選。設置圓環寬度方向上的分段數，數值越大，橫截面圓滑。默認值是 8 |
| p | 可選。定義扭結的形狀，默認圍2 |
| q | 可選。定義扭結的形狀，默認圍3 |
| heightScale | 可選。可拉伸環狀扭結，默認值圍1 |
1.6 PolyhedronGeometry 多面體
1.屬性
| ** 屬性 ** | ** 描述 ** |
|---|---|
| vertices | 必須。此屬性定義構成多面體的頂點。 |
| faces | 必須。此屬性定義由 vertices 中的點構成的面 |
| radius | 可選。此屬性定義多面體，整體的大小。默認值是 1 |
| detail | 可選。此屬性定義給多面體添加哪種額外細節。取值範圍是大於等於 0。當設爲 0 時，多面體的每一個面都不會有任何細節；爲 1 時，每一個面多將再次分成 4 個小三角形表示；爲 2 時，再次分隔的每一個面又會繼續分成 4 個小三角形，以此類推，數值越大越接近球體，表面越光滑 |
1.7 lcosahedronGeometry
1.8 TetrahedronGeometry
1.9 OctahedronGeometry
1.10 DodecahedronGeometry
第七章 高級幾何體和二次元操作
1.1 ConvexGeometry（凸面體）
1.2 LatheGeometry （掃描體）
1.定義：
它是從一條光滑的曲線開始創建圖形，這條曲線是通過指定一些點（也叫節點）來定義的，而這條曲線通常也被稱作樣條曲線。當這條曲線圍繞一個固定點選擇時，就構成了一個類似花瓶或鈴鐺的圖形
繞z軸旋轉
2.語法：
LatheGeometry(points, segments, phiStart, phiLength)
3.屬性：
| ** 屬性 ** | ** 描述 ** |
|---|---|
| points | 必選。此屬性定義構成樣條曲線的點，然後基於這條曲線生成類似花瓶或鈴鐺的圖形 |
| segments | 可選。此屬性定義構成圖形時所需的分段數。默認值是 12 |
| phiStart | 可選。此屬性定義構成圖形時從圓的何處開始。取值範圍是 0 到 2π。默認值是 0 |
| phiLength | 可選。此屬性定義構成圖形時有多完整。例如四分之一圓 0.5π。默認值是 2π（整圓 360°） |
1.3 ExtrudeGeometry（拉伸體）
1.定義：
它是從一個二維圖形創建出一個三維圖形。譬如，我們可以先通過 THREE.Shap 對象，先創建一個二維的圖形，然後通過 ExtrudeGeometry 將它拉伸爲一個三維圖形。也可以先通過 THREE.PlaneGeometry 對象創建一個二維平面，然後再利用 ExtrudeGeometry 進行拉伸。
2.屬性：
| ** 屬性 ** | ** 描述 ** |
|---|---|
| amount（數量） | 可選。此屬性定義圖形可以拉多高。默認值是 100 |
| bevelThinkness（斜角厚度） | 可選。此屬性定義圖形斜角的厚度。斜角是指前後面和拉伸體之間的倒角。默認值是 6 |
| bevelSize（斜角尺寸） | 可選。此屬性定義圖形斜角的高度。默認值是 bevelThickness - 2 |
| bevelSegments（斜角分段數） | 可選。此屬性定義圖形斜角的分段數。默認值是 3 |
| bevelEnabled（是否啓用斜角） | 可選。此屬性定義圖形是否啓用斜角。默認值是 true |
| curveSegments（曲線分段數） | 可選。此屬性定義圖形拉伸時曲線分成多少份。默認值是 12 |
| steps（拉伸體段數） | 可選。此屬性定義圖形拉伸體被分成多少段 |
| extrudePath（拉伸路徑） | 可選。此屬性定義圖形沿着什麼路徑拉伸。如果未指定，默認就會沿着 z 軸拉伸 |
| frames | 可選。此屬性定義一種沿着 extrudePath 路徑的每一步包含有 tangents, normals, binormals 數組的對象 |
| UVGenerator（UV生成器） | 可選。此屬性定義一種提供UV生成器功能的對象 |
1.4 TubeGeometry（管狀體）
屬性：
| ** 屬性 ** | ** 描述 ** |
|---|---|
| path | 必選。此屬性定義一條類型爲 THREE.SplineCurve 的路徑，以便指定管道應當遵循的路徑 |
| tubularSegments | 可選。此屬性定義構建管道時沿路徑方向所需的分段數。默認值是 64。一般路徑越長，指定的分段數應該越多 |
| radius | 可選。此屬性定義管道的半徑。默認值是 1 |
| radiusSegments | 可選。此屬性定義管道沿圓周方向的分段數。默認值是 8.數值越大，越圓滑 |
| closed | 可選。此屬性定義管道的首尾是否會連接起來。默認值是 false |
1.5 TextGeometry（三維文字）
1.語法
var geometry = new THREE.TextGeometry(text,options);
- 第一個參數是需要顯示的字體
- 第二個參數是相關的配置項(屬性)
2.屬性
| ** 屬性 ** | ** 是否必需 ** | ** 描述 ** |
|---|---|---|
| font | 是 | 新版本的字體是以json格式保存，我們需要通過異步加載進入頁面，所以，必需在加載完字體以後才能夠實例化。 |
| size | 否 | 該屬性指定文本的大小。默認值爲100 |
| height | 否 | 該屬性指定拉伸的長度（深度）。默認值爲50 |
| weight | 否 | 該屬性指定字體的粗細。可選值包括normal和bold。默認值爲normal。 |
| style | 否 | 該屬性指定字體的樣式。可選值包括normal和italic。默認值爲normal |
| bevelThickness | 否 | 該屬性指定斜角的深度。斜角是前後面和拉伸體之間的倒角。該值定義斜角進入圖形的深度。默認值爲10。 |
| bevelSize | 否 | 該屬性指定斜角的高度。默認值爲8 |
| bevelSegments | 否 | 該屬性定義斜角的分段數。分段數越多，斜角越平滑。默認值爲3 |
| bevelEnabled | 否 | 如果這個屬性設置爲true，就會有斜角。默認值爲false |
| curveSegments | 否 | 該屬性指定拉伸圖形時曲線分成多少段。分段數越多，曲線越平滑。默認值爲4 |
| steps | 否 | 該屬性指定拉伸體被分成多少段。默認值爲1 |
| extrudePath | 否 | 該屬性指定圖形沿着什麼路徑拉伸。如果沒有指定，則沿着z軸拉伸 |
| material | 否 | 該屬性定義的是前後面所用材質的索引。使用THREE.SceneUtils.createMultiMaterialObject函數來創建網格 |
| extrudeMaterial | 否 | 該屬性指定斜角和拉伸體所用材質的索引。如果想給前後面使用單獨的材質，使用THREE.SceneUtils.createMultiMaterialObject函數來創建網格 |
| uvGenerato | 否 | 當你給材質使用紋理時，UV映射確定紋理的哪一部分用於特定的面。使用uvGenerator屬性，你可以傳入自己的對象，該對象將爲傳入的圖形創建的面創建UV設置。如果沒有指定，則使用THREE.ExtrudeGeometry.WorldUVGenerator |
| frames | 否 | frenet框架用於計算樣條曲線的切線、法線和副法線。在沿extrudePath拉伸幾何體時會用到這個屬性。你不需要指定它，因爲Three.js提供了實現途徑—THREE.TubeGeometry.FrenetFrames，它也被用作默認值。 |
1.6 ParametricGeometry（等式體）
1.定義：
使用THREE.ParametricGeometry可以根據傳入的公式，計算出相應的幾何體。這是一個很具有擴展性的幾何體。
2.語法：
var geometry = new THREE.ParametricGeometry(function, slices, stacks);1
通過上面的方法，就可以創建出一個THREE.ParametricGeometry的幾何體。相關的參數爲：
3.屬性
| ** 屬性 ** | ** 是否必需 ** | ** 描述 ** |
|---|---|---|
| function | 是 | 該屬性爲一個函數，該函數以u、v值作爲參數定義每個頂點的位置。需要返回THREE.Vector3的值 |
| slices | 是 | 該屬性定義u值應該分成多少份 |
| stacks | 是 | 該屬性定義v值應該分成多少份 |