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。 |