K3D JavaScript 畫布庫/原始檔
The canvas K3D libraries at http://kevs3d.co.uk/dev/canvask3d by Kevin Roast are JavaScript libraries for three dimensional graphics using HTML5 canvas. As of October 18th, 2011, they included these files:
執行最簡單的 K3D 示例，顯示一個簡單的 HTML5 頁面設定，包括一個畫布元素，匯入 K3D 庫，設定和顯示一個動畫線框 3D 立方體。
一個簡單的 K3D 示例，顯示一個簡單的 HTML5 頁面設定，包括一個畫布元素，匯入 K3D 庫，設定和顯示一個動畫光源 3D 立方體 - 立方體透過在一個虛擬邊界框內彈跳來動畫。
另一個簡單的示例，顯示一個動畫紋理對映光源 3D 立方體。
展示五個演示；“點選上面的演示以啟動或停止它們！最後更新：2011 年 8 月 22 日”；作者的聯絡資訊；連結到更多演示和連結到此處描述的原始碼 .zip 檔案的下載連結。在中心，最初執行的演示顯示了數十個線框立方體複合在辣椒紋理上。左下方的二十面體將響應空格鍵的按下以在多邊形、線框和點之間進行切換，而右下方的球體則顯示了紋理對映到動畫物體。
與上面的 k3d_test.html 相同，但顯示 TPF（每幀時間）和 FPS（每秒幀數）統計資料。
此檔案由 k3d_test.html 和 k3d_test_DEBUG.html 使用，用於在五個畫布元素上設定五個演示。
- “一個立方體的蛇”，使用 24 個新的 K3D.K3DObject()，每個都有不同的 .ophi 和 .otheta 屬性，以及相同的 drawmode="wireframe"、addgamma、add{gamma,theta,phi}、about{x,y,z} 和 scale 屬性，init(座標中的點，頂點在點對中，面作為顏色和四個頂點)，然後 K3D.Controller(畫布元素).addK3DObject() 用於所有 24 個立方體
- “將點分佈在球體的表面上”，首先建立一個圍繞球體的點和邊的列表，然後是 K3DObject 的 add{gamma,theta,phi}、linescale、init(pts, edges, [])，然後是 addK3DObject()
- “線框螺旋球體”與前一個相同，只是 drawmode="wireframe"
- “二十面體” 生成器程式碼，drawmode="solid" 最初，shademode="lightsource"，fillstroke="false" 最初，帶有 init(點，邊，由頂點組成的多邊形，帶有顏色)
- “鑲嵌球體 - 三角形條帶已轉換為四邊形” drawmode="solid"，shademode="lightsource"，但帶有 init(點，[]，由頂點組成的多邊形，帶有紋理)
還包括以下標題的程式碼部分作為有用的示例
- “為實心物體演示新增光源”
- “新增一個物件來表示光源，以便它在場景中可見”（也適用於上面的實心物體演示 #5）
- “渲染第一幀”
- “使用運動模糊背景填充”
- “繫結文件鍵處理程式以幫助除錯”
此操作執行一個指標可操作的動畫演示，這是動畫彩色燈光以及透過回撥介面即時操作物體頂點的示例。
與上面的 ultralight.html 相同，但顯示 TPF（每幀時間）和 FPS（每秒幀數）統計資料。
此檔案由 ultralight.html 和 ultralight_DEBUG.html 使用，用於在畫布元素上設定演示的 3D 物件，物件頂點回調方法以修改物件，以及指標互動以旋轉物件。
以下標題包括作為有用的示例的程式碼部分
- “生成測試物件” “一個鑲嵌的板”，生成一個扁平的矩形板（鑲嵌平面）作為 K3D 物件。函式 tesselatedPlane() 可用於此目的，可在其他演示中重複使用。
- “操作點”，透過回撥方法即時修改物體頂點的示例。
- “新增光源”，新增多個彩色燈光
- “新增 3D 物件來表示光源，以便它們在場景中可見”，新增可見的 3D 物件來表示場景中燈光位置的示例。
- “從 Mr Doob http://mrdoob.com/ 借來的巧妙的拖動/觸控事件捕獲程式碼”，公共領域程式碼，用於將滑鼠和移動裝置觸控事件繫結到處理程式，以允許使用者控制即時旋轉物體。
此操作執行一個指標可操作的動畫演示，這是新的 HTML5 標誌以 3D 形式顯示的示例。還使用標準畫布 2D API 生成一個動畫背景。
與上面的 html5logo.html 相同，但顯示 TPF（每幀時間）和 FPS（每秒幀數）統計資料。
此檔案由 html5logo.html 和 html5logo_DEBUG.html 使用，用於在畫布元素上設定演示的 3D 物件，以及指標互動以旋轉物件。HTML5 標誌物件由多個物件部分組成，定義為單獨的 K3D 物件並新增到單個 K3D 控制器中以進行合成。
以下標題包括作為有用的示例的程式碼部分
- “新增渲染迴圈回撥”，K3D 渲染回撥函式的示例
- "手動清除背景 - 因為我們想要渲染一些額外的內容，在 K3D 執行 3D 渲染之前繪製背景效果", 手動清除背景並執行一些 canvas 2D API 呼叫以在使用 K3D 渲染 HTML5 logo 之前生成自定義背景。
- “從 Mr Doob http://mrdoob.com/ 借來的巧妙的拖動/觸控事件捕獲程式碼”，公共領域程式碼，用於將滑鼠和移動裝置觸控事件繫結到處理程式，以允許使用者控制即時旋轉物體。
這個數學庫從數學常量和函式開始，包括 **RAD** (pi/180), **PI**, **TWOPI**, **ONEOPI** (1/pi), **PIO2** (pi/2), **PIO4**, **PIO8**, **PIO16**, **PIO32**, **Rnd**=Math.random(), **Sin**(), **Cos**(), **Sqrt**(), **Floor**(), **Atan2**(), **Ceil**(), 然後是 **randomInt**(low, high), **weightedRandom**(weight) - 它似乎返回一個 [0,1] 之間的浮點數 - 以及返回一個新的 Vector3D 的 **calcNormalVector**(x1,y1,z1,x2,y2,z2) 函式。
接下來是 **extend**(要修改的子類，要繼承的超類，覆蓋屬性和/或方法) 實用函式，"設定原型、建構函式和超類屬性以支援一種可以連結建構函式和方法的繼承策略。靜態成員不會被繼承。" 它用於下面 k3d_... 檔案中定義的一些 K3D 類，而不在這個檔案中。
然後是 **isArray**(object)，一個布林函式，定義為 object.constructor.toString().indexOf("Array") !== -1。
然後是二維 **Vector** 類，它具有 **vector**(x,y) 初始化器，**x** 和 **y** 屬性初始化為 0，接著是 **clone**(), **set**(vector), **add**(v), **sub**(v), **dot**(v), **length**(), **distance**(v), **theta**(), **thetaTo**(v), **thetaTo2**(v), **norm**(), **rotate**(angle), **invert**(), **scale**(s)，以及 **scaleTo**(size) 方法。
然後是 **Vector3D** 類，它的定義類似，具有 **vector3D**(x,y,z) 初始化器，一個 **prototype** 屬性 {x:0,y:0,z:0}，以及上面所示的方法，還包括 **cross**(vector3D), **norm**()，但沒有包括 .theta(), .thetaTo2() 或 .scaleTo()。
最後，提供了一個影像 **Preloader** 類，它具有 **addImage**(image, url) 和 **onLoadCallback**(fn) 方法。
各種 k3d JavaScript 檔案k3d_main.js, k3d_controller.js, k3d_object.js, k3d_light.js以及k3d_renderer.js包含庫本身的原始碼。請參考 API 參考 頁面以獲取庫參考資訊和程式碼示例。
這個非常短的原始檔 (DEBUG = { FPS: false };) 表明預設情況下統計資訊被關閉，除非 **DEBUG.FPS** 值被設定為 true，這可以透過上面原始碼壓縮檔案中包含的 ..._DEBUG.html 檔案中的指令碼標籤完成。
一個 PHP 指令碼，用於將 Wavefront .obj 檔案 格式轉換為 K3D.Controller 的 init() 方法的引數。在 http://www.kevs3d.co.uk/dev/canvask3d/example_phpobj.html 上有示例輸出 - "檢視原始碼" 並向下滾動到 "// 從 obj_to_kv3d.php 指令碼輸出的 .kv3d 檔案貼上的輸出".
示例用法: php obj_to_kv3d.php cube.obj > cube.k3d
這將把轉換 cube.obj 檔案的指令碼輸出定向到一個新的檔案 cube.k3d。檔案中的示例內容
[{x:0.0,y:0.0,z:0.0},{x:0.0,y:0.0,z:1.0},{x:0.0,y:1.0,z:0.0},{x:0.0,y:1.0,z:1.0},{x:1.0,y:0.0,z:0.0},{x:1.0,y:0.0,z:1.0},{x:1.0,y:1.0,z:0.0},{x:1.0,y:1.0,z:1.0}],
[],
[{vertices:[0,6,4]},{vertices:[0,2,6]},{vertices:[0,3,2]},{vertices:[0,1,3]},{vertices:[2,7,6]},{vertices:[2,3,7]},{vertices:[4,6,7]},{vertices:[4,7,5]},{vertices:[0,4,5]},{vertices:[0,5,1]},{vertices:[1,5,7]},{vertices:[1,7,3]}]
這個 3D 資料可以直接貼上到 K3DObject 的 init() 方法中 - 例如在這個例子中: https://wikibook.tw/wiki/K3D_JavaScript_Canvas_Library/Tutorial#Example_1:_Minimum_simple_page_set-up_and_Hello_World_example_K3D_object
這些是六個 .PNG 格式的圖形檔案，第一個用於合成背景，其他用於在各種演示期間的 polygon 紋理。