这是我参与更文挑战的第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