1.0.1 • Published 6 months ago
amgl v1.0.1
WebGL
介绍
这是一个基于WebGL的基础库设计，用于快速搭建三维场景。库内对常用基础几何体进行了封装，如cube、rectangular等，方便开发。
下载引入
- 执行
npm i amgl安装基础库 - 执行
npm i安装所有依赖
使用说明
在脚本中引入库，实例如下:
场景的搭建主要包含scene、camera、render及objects三个部分，其中scene和camera是必须的；
将camera和objects等通过scene.add()方法加入场景；
执行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) 向量乘以一个三维矩阵