目标

  1. 绘制点、线、面
  2. 绘制复杂图形

threejs学习三杠一:点线面

3D世界

在计算机的世界里,3D世界是由 点组成 两点成一线三个不在一条直线上的点就能组成一个三角形面无数个三角形面就能组成各种形状的物体。(计算机图形的理论知识)

通常把这种网络模型叫做 Mesh 模型。给物体贴上皮肤(纹理),那么这个物体就实际展现出来了。然后无数个这样的物体就组成了 3D 世界。

Threejs绘制一个点

1、定义

在三维空间中的某一个点可以用一个坐标点来表示。一个坐标点有 (x,y,z) 三个分量构成(齐次坐标)。在 three.js 中,点可以在 右手坐标系 中表示:

空间几何中,点可以用一个向量表示,在 three.js 中也是用一个向量表示的,代码如下:

其中的 THREE.Vector3 表示 Vector3 是定义在 THREE 下面的一个类。使用 Vector3 必须加前缀 THREE。

THREE.Vector3 被赋值为一个函数。这个函数有三个参数(如上代码),分别为 x 坐标、y 坐标、 z 坐标的分量。

2、点操作

在 Threejs 的 3D 世界中,点可以用 THREE.Vector3 来表示。(对应地址源码/src/math/Vector3.js ,版本不同地址可能不同)

假设有一个点 x=4, y=8, z=9。将这样定义:

Threejs绘制一条线

效果:

理论上:两个不重合的点能够决定一条线。在 Threejs 中,可是如此。代码如下:

代码解析:

1、声明一个几何体 Geometry

几何体里面有一个 vertices 变量,可以用以存放点。

2、定义线条材质,使用 THREE.LineBasicMaterial 类型定义,它接受一个集合作为参数

3、定义2个顶点位置并放入 geomotry 

4、为定义的2个顶点设置不同的颜色

geometry 中的 colors 表示顶点的颜色,必须材质中 vertexColors 等于 THREE.VertexColors 时,颜色才有效果,如果 vertexColors 等于 THREE.NoColors 时,就没有效果了。这时就会取材质中 color 的值

5、定义一条线

定义线条,使用 THREE.Line 类,代码如下:

后记

A、线条再解析

在 Threejs 中,一条线由 点、材质和颜色 组成。

点由 THREE.Vector3 表示,但是因为 Threejs 中没有直接单独绘制点的函数,所以必须放到一个 THREE.Geometry 中,这个结构包含了一个 vertices 数组,这个参数就是用于存放无数多个点的数组。

为了绘制一条直线,首先需要定义两个点:

然后声明一个 THREE.Geometry 结构体,并把点放进去:

geometry.vertices 可以使用 push 方法,是因为这个参数是一个数组。

下一步就是需要给这个线段添加一种材质,可以使用转为线准备的材质结构:THREE.LineBasicMaterial

最终通过 THREE.Line 绘制一条线:

B、坐标平面

效果:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

不说废话,献上代码:

解析:

最终要的部分就是 // Init Object – coordination 绘制部分的算法了

实际只是定义了一条参考线段( point1, point2 ),通过操作,复制20次:平移到z轴不同位置,形成一组平行的线段;同理围绕y轴旋转90度,平移到x轴不同的位置,形成另一组平行线段。

经过这些操作,最终绘制出坐标网格。