K3D JavaScript 畫布庫/API 參考
所有 K3D 物件的抽象基類功能。K3D.BaseObject 例項是在由 K3D.Controller 管理的 3D 空間中存在的物件，並具有許多使用者可定義的屬性。它們可以描述物件相對於原點的相對位置，並允許設定簡單的動畫，這些動畫會隨著時間的推移逐步增加物件的一個或多個角度或位置向量屬性。基類還負責物件的 3D 渲染管道的初始部分，透過根據物件的旋轉和位置屬性計算每一幀的 3D 矩陣來實現。
以下屬性描述了物件在動畫過程中應圍繞其旋轉的點，預設值為原點 0,0,0
- aboutx (數字)
- 物件旋轉原點的 x 座標
- abouty (數字)
- 物件旋轉原點的 y 座標
- aboutz (數字)
- 物件旋轉原點的 z 座標
以下屬性描述了物件相對於其旋轉原點的初始旋轉角度，預設值為零度
- otheta (數字)
- 圍繞 X 軸旋轉物件的初始角度（度數）
- ophi (數字)
- 圍繞 Y 軸旋轉物件的初始角度（度數）
- ogamma (數字)
- 圍繞 Z 軸旋轉物件的初始角度（度數）
以下屬性描述了引擎在每次動畫幀中應如何修改旋轉，預設值為無動畫
- addtheta (數字)
- 每次動畫幀圍繞 X 軸新增的旋轉角度（度數）
- addphi (數字)
- 每次動畫幀圍繞 Y 軸新增的旋轉角度（度數）
- addgamma (數字)
- 每次動畫幀圍繞 Z 軸新增的旋轉角度（度數）
以下屬性描述了物件在 3D 空間中的初始偏移量，這使物件可以移動到某個位置，請注意，旋轉原點相對於此位置，預設值為原點 0,0,0
- offx (數字)
- 物件偏移量 x 座標
- offy (數字)
- 物件偏移量 y 座標
- offz (數字)
- 物件偏移量 z 座標
以下屬性描述了每次動畫幀應用於物件偏移位置的 x、y、z 軸速度，用於與下面的 bmin/max 屬性結合，以自動移動物件以建立簡單的動畫，預設值為無速度
- velx (數字)
- 物件在 x 軸上的速度
- vely (數字)
- 物件在 y 軸上的速度
- velz (數字)
- 物件在 z 軸上的速度
以下屬性描述了一個虛擬邊界框，如果物件的偏移位置觸及邊界框的邊緣，物件將在該框中自動“反彈”，這可以與上面的速度屬性結合使用，以建立簡單的 3D 反彈動畫，預設值為未定義的邊界框
- bminx, bminy, bminz, bmaxx, bmaxy, bmaxz (數字)
- 邊界框 x、y、z 最小和最大座標
- scale (數字)
- 描述了在初始顯示之前應用於物件點的縮放因子。這是一個一次性操作。它通常用於放大/縮小物件以適合當前畫布大小。因此，您可以使用已知大小定義一次物件，並在顯示之前對其進行縮放以用於不同的動畫等。它實際上不會將觀察者移近物件，而只是更改物件的大小。預設值為 1.0。
- 公共方法
- K3D.BaseObject 上的方法由子類呼叫，預計使用者程式碼不會直接呼叫它們。
K3D 可渲染物件的通用功能。K3D.K3DObject 是 K3D.BaseObject 的子類，它表示引擎可能渲染的任何東西。有許多額外的公共屬性來描述物件應如何渲染。
以下屬性修改了引擎渲染物件的方式
- drawmode (字串)
- "point" - 只渲染物件的點。
- "wireframe" - 將物件的邊緣渲染為線，
- "solid" - 將物件的 polygons 渲染為實心填充的 polygons。
- shademode (字串)
- "plain" - 純色渲染，不會嘗試光源或陰影線或 polygons，這是最簡單的渲染模式。
- "depthcue" - z 順序深度顏色渲染 - 引擎將根據點的 z 順序對物件進行從亮到暗的陰影處理（使用物件的顏色作為最亮的顏色），並調整相對線寬以使背景中的線看起來比最靠近觀察者的線更遠。
- "lightsource" - 光源顏色和紋理渲染（僅適用於 "solid" drawmode），預設情況下，引擎將以物件的基本顏色或 polygons 本身定義的顏色（如果存在）對 polygons 進行陰影處理，並將考慮任何定義的紋理 - 最終的照明和陰影計算基於 polygons 表面相對於觀察者的角度。因此，使用預設照明時，隨著 polygons 越來越遠離觀察者，它們的陰影將變得越來越暗。除了預設照明之外，還可以新增額外的彩色燈光以生成酷炫的照明效果（這些燈光本身可以在動畫過程中移動和修改）。請參閱 K3D.LightSource，以及 Ultralight 演示以瞭解此功能的示例。
- color (陣列)
- 物件的預設顏色 - 當使用 "plain" 陰影模式渲染點、線或 polygons 時使用。以陣列形式指定 RGB 0-255 值，例如 [255,255,255] 是白色預設顏色。
- perslevel (數字)
- 透視級別乘數 - 建議使用 2 的冪，預設值為 512。此值控制 3D->2D 投影的透視效果強度。較低的值會產生強烈的 3D 外觀，較高的值會產生更平坦的 3D 投影。
- linescale (數字)
- "wireframe" 繪製模式的浮點縮放因子 - 使用它使物件的線框邊緣看起來粗細。預設值為 2.0 畫素。
- doublesided (布林值)
- 預設情況下此值為 false，因為出於效能原因，引擎不會渲染不面向觀察者的 polygons。將此標誌設定為 true 以始終渲染所有 polygons，無論是否可見。如果您想檢視物件的背面（例如立方體的內部），這將很有用。
- textures (陣列)
- 在 polygons 渲染期間可用於物件的紋理 Image 物件陣列。當為 3D 物件定義 polygons 時，可以指定紋理索引，該索引引用此影像陣列。預設情況下為空陣列。請參閱 k3ddemos.js 以瞭解載入、設定和定義 polygons 以使用紋理的示例。
重要：物件的初始點、邊和麵應透過以下描述的 init 方法設定，但如果需要，可以在動畫期間透過稍後描述的回撥介面來操作這些結構中的值。請參閱 ultralight.js 以瞭解使用回撥方法即時操作物件頂點的示例。
- points (陣列)
- 3D 物件的點頂點座標陣列。X、Y、Z 座標值作為 Number 值的連續單個數組。如果需要在動畫期間操作點，則必須正確計算值的 3D 座標的底層陣列索引。例如，對於物件中第 5 個點的“X”座標： (5-1 * 3 + 0) = 12，例如物件中第 3 個點的“Z”座標的索引： (3-1 * 3 + 2) = 8。物件的頂點列表是強制性的，並且始終在物件初始化後存在。
- edges (陣列)
- 3D 物件的邊陣列。邊被描述為具有結構 {a: p1, b: p2} 的 JavaScript 物件，即陣列中的每個值都是一個 JavaScript 物件，包含兩個屬性“a”和“b”，每個屬性都引用 points 陣列中的 3D 座標。請參閱 example1.html 和大多數其他演示檔案，以瞭解如何描述邊的示例。僅當物件將線上框繪製模式下顯示時才需要提供邊列表，因此如果僅將物件顯示為點或 polygons，可以省略邊列表。
- faces (陣列)
- 3D 物件的 polygons 面數組。陣列中的每個值都是一個 JavaScript 物件，具有以下結構
{vertices:[p1...pN], color:[r,g,b], texture:n}
- vertices - 指向 points 陣列的 3D 座標索引值陣列。每個 polygons 至少需要提供 3 個頂點。
- color - RGB 0-255 整數顏色值（可選 - 預設值為白色）
- texture - 物件的紋理列表索引（可選 - 預設值為無紋理）
示例
{vertices:[0, 1, 2,], color:[0,255,0]} - 生成一個連線索引為 0、1 和 2 的 3D 座標的綠色三角形。
{vertices:[0, 1, 2, 3], color:[255,0,0], texture:0} - 生成一個紅色四邊形，連線索引為 0、1、2 和 3 的 3D 座標，並使用索引為 0 的紋理影像。 請參見 example3.html 以瞭解紋理對映立方體的示例。 僅當物體將在實體繪製模式下顯示時，才需要提供面列表，因此如果僅以點或線框形式顯示物體，則可以省略面列表。
- recalulatenormals (布林值)
- K3D 對多邊形法向量進行一次性計算，以便正確地對多邊形進行光照，並在不可見時正確地移除。 僅當您在動畫過程中（透過回撥方法）操作點時，才將此標誌設定為 true，因為在這種情況下，引擎需要為每一幀重新計算法向量。 預設值為 false。
- fillstroke (布林值)
- 由於 HTML5 畫布填充形狀的方式，如果將兩個多邊形完全並排放置並渲染它們，它們之間將有一個 0.5 畫素的細小間隙。 這會導致“破裂”效果，使一些物體看起來像是薄洞。 為了解決這個問題，引擎可以渲染每個多邊形兩次，這會導致畫布“過度繪製”多邊形的抗鋸齒邊緣，這是解決問題的最快方法。 將此屬性設定為 true，引擎將雙重填充多邊形以修復破裂效果。 但是，這是一個相對昂貴的操作，會降低渲染速度。
- depthscale (數字)
- 使用深度提示渲染模式時，此值控制深度提示/透視縮放計算的“中間點”。 預設情況下，它設定為畫布寬度的一半。 通常您不需要修改此值。
- sortmode (布林值)
- “sorted” 或 “unsorted” 之一，預設值為 “sorted”。 可以用於在顯示物體之前停用按 z 順序排序。 通常您不需要修改此值。
init(points -> 陣列, edges -> 陣列, faces -> 陣列) : 使用點、邊和多邊形面來初始化一個 3D 物件。 上面描述了對點、邊和麵所期望的結構。 這是一個一次性初始化函式，應在 K3D 引擎開始在畫布上動畫渲染之前僅呼叫一次。
可以透過將值應用於各種公共屬性以及座標等來輕鬆地設定 K3D 物件，例如，在幾行程式碼中使用 init 方法
...
// create a K3D object for rendering
var obj = new K3D.K3DObject();
with (obj)
{
color = [255,0,0]; // colour used for wireframe edges and depthcued rendering mode
drawmode = "wireframe"; // one of "point", "wireframe", "solid"
shademode = "plain"; // one of "plain", "depthcue", "lightsource" (solid drawing mode only)
scale = 50;
init(
// describe the points of a simple unit cube
[{x:-1,y:1,z:-1}, {x:1,y:1,z:-1}, {x:1,y:-1,z:-1}, {x:-1,y:-1,z:-1},
{x:-1,y:1,z:1}, {x:1,y:1,z:1}, {x:1,y:-1,z:1}, {x:-1,y:-1,z:1}],
// describe the edges of the cube
[{a:0,b:1}, {a:1,b:2}, {a:2,b:3}, {a:3,b:0},
{a:4,b:5}, {a:5,b:6}, {a:6,b:7}, {a:7,b:4},
{a:0,b:4}, {a:1,b:5}, {a:2,b:6}, {a:3,b:7}],
// describe the polygon faces of the cube
[{color:[255,0,0],vertices:[0,1,2,3]},{color:[0,255,0],vertices:[0,4,5,1]},
{color:[0,0,255],vertices:[1,5,6,2]},{color:[255,255,0],vertices:[2,6,7,3]},
{color:[0,255,255],vertices:[3,7,4,0]},{color:[255,0,255],vertices:[7,6,5,4]}]
);
}
...
 |
此部分是一個存根。 您可以透過擴充套件它來幫助 Wikibooks。 |
以下是根據示例 1 改編的控制器用法
// bind a K3D Controller object to the canvas // - it is responsible for managing the K3D objects displayed within it var k3d = new K3D.Controller(canvas); k3d.fps = 30; // request 30 frames per second animation from the controller var obj = new K3D.K3DObject(); // create a K3D object for rendering .... obj.scale = 50; obj.init(vertices, edges, faces); k3d.addK3DObject(obj); // add the object to the controller k3d.paused = false; // begin the rendering and animation immediately k3d.frame(); // render a frame before returning
K3D.Controller(canvas[, DisableClickToPause]) 中的第二個布林值引數，如果為true，則停用單擊以暫停動畫。.
|
此部分是一個存根。 您可以透過擴充套件它來幫助 Wikibooks。 |