WebGL

介绍

这是一个基于WebGL的基础库设计，用于快速搭建三维场景。库内对常用基础几何体进行了封装，如cube、rectangular等，方便开发。

下载引入

1. 执行 npm i amgl 安装基础库
2. 执行 npm i 安装所有依赖

使用说明

1. 在脚本中引入库，实例如下:

   

2. 场景的搭建主要包含scene、camera、render及objects三个部分，其中scene和camera是必须的；

3. 将camera和objects等通过scene.add()方法加入场景；

4. 执行render.renderScene(scene,camera)方法（该方法接收两个参数，第一个是scene，第二个是camera）将场景渲染到页面。

API文档

1.Class BaseObjec(基础几何体类)

• 属性

  | 属性名 | 类型 | 描述 | | :----------- | :------ | :--------------------------- | | isBaseObject | bool | 标志是否是基础几何体类的实例 | | id | number | 物体id | | type | string | 物体类型，值为baseObject | | name | string | 名称属性 | | parent | object | 对象 | | children | array | 保存子对象 | | position | Vector3 | 物体位置坐标 | | lookAtMatrix | Matrix4 | 描述物体朝向的四阶矩阵 | | up | Vector | 默认向上的方向为y轴方向 | | matrix | Matrix4 | 物体的局部矩阵 | | worldMatrix | Matrix4 | 物体对应的世界矩阵 | | target | Vector3 | 对应物体朝向的目标位置 |

• 方法

  | 函数名 | 描述 | | :----------------------------------- | :----------------------------------------------------------- | | add(object) | 添加子对象，参数object为要添加的对象，可以是单个参数、多个参数或数组 | | remove(object) | 移除子对象，参数object为要移除的对象，可以是单个参数、多个参数或数组 | | removeFromParent() | 通过父对象移除自身 | | setParent(parent) | 设置自身的父对象为parent | | clearChildren() | 移除所有子对象 | | getObjectById(id) | 通过id查找指定子对象 | | lookAt(x,y,z) | 设置朝向，(x,y,z)为目标位置 | | updateWorldMatrix(parentWorldMatrix) | 更新物体的世界矩阵 |

2.Class Attribute(属性类):存放物体的数据

• 属性

  | 属性名 | 类型 | 描述 | | :---------- | :----- | :-------------------- | | isAttribute | bool | | | array | array | 属性的数据数组 | | itemSize | number | array中每组数据的数量 | | count | number | array中数据分组数 |

• 方法

  | 函数名 | 描述 | | :--------------- | :----------------------------------------------------------- | | set(arr,offset) | 为array赋值，第一个参数为值数组，第二个参数为偏移量及itemSize的值 | | applyMatrix4(m4) | 将属性的数据执行一个四维矩阵 | | applyMatrix3(m3) | 将属性的数据执行一个三维矩阵 |

3.Class Color(颜色类)

• 属性

  | 属性名 | 类型 | 描述 | | :----- | :--- | :------------- | | r | | 颜色rgb中的r值 | | g | | 颜色rgb中的g值 | | b | | 颜色rgb中的b值 |

• 方法

  | 函数名 | 描述 | | :-------------- | :----------------------------------------------------------- | | setColor(r,g,b) | 为color实例设置颜色，接收的参数可以是颜色的rbg值，也可以是颜色对应的名称字符串，还可以是颜色对应的16进制 |

4.Class Camera（相机类）继承于BaseObject类

• 属性

  | 属性名 | 类型 | 描述 | | ---------------- | ------- | ------------------ | | position | Vector3 | 相机位置 | | projectionMatrix | Matrix4 | 相机对应的投影矩阵 |

• 方法

  | 函数名 | 描述 | | ------------------ | ------------------------------------------------------- | | setPosition(x,y,z) | 设置相机的位置，接收三个参数分别是位置对应的x，y，z坐标 | | loogAt(x,y,z) | 设置相机朝向的目标位置 |

5.PerspectiveCamera（透视相机类）继承于Camera类

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ------ | ---------------------- | | fov | number | 相机视锥体垂直视野角度 | | aspect | number | 相机视锥体长宽比 | | near | number | 相机视锥体近端面 | | far | number | 相机视锥体远端面 |

6.OrthographicCamera（正投影相机类）继承于Camera类

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ------ | ---------------- | | left | number | 相机视锥体左面 | | right | number | 相机视锥体右面 | | top | number | 相机视锥体上面 | | bottom | number | 相机视锥体下面 | | near | number | 相机视锥体近端面 | | far | number | 相机视锥体远端面 |

7.Class Event（事件类）

• 方法

  | 函数名 | 描述 | | ---------------------------------- | ------------------------------------------------------------ | | addEventListener(type,listener) | 添加事件，第一个参数为事件类型，第二个参数为要添加的事件对象 | | hasEventListener(type,listener) | 判断是否包含listener事 | | removeEventListener(type,listener) | 移除listener事件 | | dispatchEvent(event) | 执行event事件 |

8.Class Geometry（几何体类）继承于BaseObject类

• 属性

  | 属性名 | 类型 | 描述 | | ---------- | ------ | ---------------------------------- | | color | Color | 物体颜色 | | attributes | object | 物体的顶点、法向量等属性 | | drawRange | object | 物体顶点的绘制范围，包含起点和数量 | | drawType | string | 绘制类型 |

• 方法

  | 函数名 | 描述 | | ---------------------------------- | ------------------------------------------------------------ | | setAttribute(name,value) | 为物体设置某属性，name为属性名，value为属性值 | | getAttribute(name) | 获取物体某属性值 | | applyMatrix4(matrix4) | 将物体进行四维矩阵变换 | | setColor(r,g,b) | 设置物体颜色 | | setPosition(x,y,z) | 设置物体位置 | | makeRotation(angleX,angleY,angleZ) | 设置旋转，传入一个参数表示执行x轴旋转，以此类推，参数为旋转角度 | | makeScale(x,y,z) | 设置物体缩放，参数分别对应x，y，z三个方向的缩放倍率 |

9.Class Cube（立方体类）继承于Geometry类

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ------ | ---------- | | width | number | 几何体宽度 | | height | number | 几何体长度 | | depth | number | 几何体深度 |

10.Class Rectangular（矩形类）继承于Geometry类

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ------ | -------- | | width | number | 矩形宽度 | | height | number | 矩形的高 |

11.Class Light（灯光类）继承于BaseObject类

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ----- | -------- | | color | Color | 灯光颜色 |

• 方法

  | 函数名 | 描述 | | ------------------ | ------------ | | setPosition(x,y,z) | 设置灯光位置 | | setColor(r,g,b) | 设置灯光颜色 |

12.Class PointLight（点光源类）继承于Light类

13.Class DirectionLight（方向光源类）继承于Light类

• 属性

  | 属性名 | 类型 | 描述 | | --------- | ------- | -------- | | direction | Vector3 | 光的方向 |

• 方法

  | 函数名 | 描述 | | ------------------- | ------------ | | setDirection(x,y,z) | 设置光的方向 |

14.Class SpotLitght（聚光灯类）继承于light类

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ------ | ------------------ | | angle | number | 聚光灯照射范围角度 |

• 方法

  | 函数名 | 描述 | | --------------- | ------------ | | setAngle(angle) | 设置照射角度 |

15.Class Matrix4（四维矩阵类）

• 属性

  | 属性名 | 类型 | 描述 | | ------- | ----- | ------------------ | | element | array | 存放矩阵元素的数组 |

• 方法

  | 函数名 | 描述 | | --------------- | ------------- | | setElement(arr) | 设置element值 |

16.Class Vector3（三维向量类）

• 属性

  | 属性名 | 类型 | 描述 | | ------ | ---- | ------- | | x | | x轴分量 | | y | | y轴分量 | | z | | z轴分量 |

• 方法

  | 函数名 | 描述 | | --------------------- | ----------------------------------------- | | set(x,y,z) | 设置向量值 | | cross(vector3) | 与向量vector3进行叉乘运算，返回一个新向量 | | subVector3(vector3) | 与向量vector3进行减法运算 | | normalize() | 单位化向量 | | applyMatrix4(matrix4) | 向量乘以一个四维矩阵 | | applyMatrix3(matrix3) | 向量乘以一个三维矩阵 |

17.Class WebGLRenderer（渲染器类）