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://wikibooks.cn/wiki/K3D_JavaScript_Canvas_Library/Tutorial#Example_1:_Minimum_simple_page_set-up_and_Hello_World_example_K3D_object
这些是六个 .PNG 格式的图形文件，第一个用于合成背景，其他用于在各种演示期间的 polygon 纹理。