主要内容
描述 3D 图形
让我们先从简单的立方体开始。尽管四面体的边较少,但他们的边却不是正交的,这就会使得事情变得更棘手。让我们先从创建一个 200×200×200 像素,中心在 (0, 0, 0) 的立方体开始吧。
我们先不从绘制任何东西开始,而是先从设定可以描述我们的三维形状的数字开始 —— 具体来说,就是描述了形状的 节点 和 边 的数字。
节点
我们首先定义一个节点数组,其中每个节点是一个由三个数字组成的数组,即该节点的 x,y 还有 z 坐标:
var node0 = [-100, -100, -100];
var node1 = [-100, -100, 100];
var node2 = [-100, 100, -100];
var node3 = [-100, 100, 100];
var node4 = [ 100, -100, -100];
var node5 = [ 100, -100, 100];
var node6 = [ 100, 100, -100];
var node7 = [ 100, 100, 100];
var nodes = [node0, node1, node2, node3, node4, node5, node6, node7];
你可能已经注意到了,组合正负100可以创造出8种不同的节点。
你可以在下面的图形中看到以原点为中心的 2x2x2 立方体的节点。使用鼠标来旋转视角:
边
接下来让我们来定义表示边的数组。其中每个边都是由两个数字组成的数组。例如,
edge0
定义了 node0
和 node1
之间的边。因为数组从零开始,我们就从 0 开始计。(为了获取第一个节点的值, 我们可以键入 nodes[0]
)。var edge0 = [0, 1];
var edge1 = [1, 3];
var edge2 = [3, 2];
var edge3 = [2, 0];
var edge4 = [4, 5];
var edge5 = [5, 7];
var edge6 = [7, 6];
var edge7 = [6, 4];
var edge8 = [0, 4];
var edge9 = [1, 5];
var edge10 = [2, 6];
var edge11 = [3, 7];
var edges = [edge0, edge1, edge2, edge3, edge4, edge5, edge6, edge7, edge8, edge9, edge10, edge11];
困难的部分是如何正确地将边连在一起。下面是连接立方体各个边的图形示例。