这是我参与更文挑战的第2天，活动详情查看： 更文挑战
在上一篇文章中我们搭建了一个Oasis Engine + vue的项目，本文主要是对上一章Oasis里index.ts代码进行的基本介绍。
开始之前
HTML+CSS
在介绍index.ts之前先介绍HTML+CSS
在 HTML 模板中插入一行 Canvas 标签代码：
<canvas id="canvas" style="width: 100vw; height:100vh;" />
为了让这个 Canvas 元素占满整个屏幕，我们为body加上以下样式。
body {
margin: 0;
overflow: hidden;
}
复制代码理解Oasis里的实体
Oasis里的一切都是实体，场景是实体，相机是实体，光是实体，渲染对象也是实体。
理解Oasis里的组件
Oasis里的组件是绑定在实体上的，使实体拥有特定的功能
理解Oasis里的坐标系
Oasis里的坐标系均为右手坐标系
开始
引入模块
为了实现这样各个功能，需要在我们的工程里引入如下 Oasis 引擎的类
import {
DirectLight,
BlinnPhongMaterial,
Camera,
MeshRenderer,
PrimitiveMesh,
Vector3,
WebGLEngine,
Color
} from 'oasis-engine'
复制代码创建引擎实例
const engine = new WebGLEngine('canvas')
engine.canvas.resizeByClientSize()
复制代码创建引擎实例，参数 ‘canvas’ 是 Canvas 元素的 id。
再通过 resizeByClientSize 方法重设画布宽高（会根据你设置的canvas的宽高对canvas里元素自动适配）
创建场景根节点
const scene = engine.sceneManager.activeScene
const rootEntity = scene.createRootEntity('root')
复制代码先通过引擎的场景管理器 engine.sceneManager 获得当前激活的场景。
获得场景后，通过场景的 createRootEntity 方法创建一个根实体，之后的实体将创建在根实体之上。
创建一个相机实体
const cameraEntity = rootEntity.createChild('camera_entity')
复制代码这样就创建好了一个实体，将它命名为 ‘camera_entity’ 并存入变量cameraEntity中
为了让cameraEntity拥有相机功能，我们需要使用addComponent将相机组件添加到实体上
cameraEntity.addComponent(Camera)
复制代码创建完成之后，通过实体上自带的变换组件 transform 来确定相机的位置和朝向。
cameraEntity.transform.position = new Vector3(0, 5, 10)
cameraEntity.transform.lookAt(new Vector3(0, 0, 0))
复制代码创建一个光照实体
const lightEntity = rootEntity.createChild('light')
const directLight = lightEntity.addComponent(DirectLight)
复制代码同样的，光照也是通过组件形式挂载到实体上。创建完实体之后，添加直接光组件 DirectLight
directLight.color = new Color(1.0, 1.0, 1.0)
复制代码这里Color（r，g，b）里的三个参数分别对应红、绿、蓝三种颜色的比例，1~0之间
例如红色为（1，0，0）
与rgb的转换
rgb(255, 85, 36)
Color（255/255，85/255，36/255）≈ Color（1，0.33，0.14）
directLight.intensity = 0.5
复制代码intensity方法设置光的强度（强度过高所有光都会是白色）
lightEntity.transform.rotation = new Vector3(45, 45, 45)
复制代码通过光照实体的旋转角度控制光线方向
创建一个立方体实体
const cubeEntity = rootEntity.createChild('cube')
const cube = cubeEntity.addComponent(MeshRenderer)
复制代码同样的方式，渲染实体也是通过组件形式挂载到实体上。
cube.mesh = PrimitiveMesh.createCuboid(engine)
cube.setMaterial(new BlinnPhongMaterial(engine))
复制代码设置渲染实体的形状和材质
可以通过 .mesh 属性 PrimitiveMesh 创建立体图形的类型
例如：
cube.mesh = PrimitiveMesh.createCuboid(engine)为立方体
cube.mesh = PrimitiveMesh.createTorus(engine）为圆环
启动引擎
一切都准备好了，让我们用一行代码来启动引擎吧！
engine.run()
end
坚持的第二天
目标是完成一个小游戏
respect by myself