从0开始的Oasis Engine学习笔记(二) —— 创建一个立方体

从0开始的Oasis Engine学习笔记(二) —— 创建一个立方体

这是我参与更文挑战的第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里的坐标系均为右手坐标系

image.png

开始

引入模块

为了实现这样各个功能,需要在我们的工程里引入如下 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)

image.png

与rgb的转换

rgb(255, 85, 36)

image.png

Color(255/255,85/255,36/255)≈ Color(1,0.33,0.14)

image.png

  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)为立方体

image.png cube.mesh = PrimitiveMesh.createTorus(engine)为圆环

image.png

启动引擎

一切都准备好了,让我们用一行代码来启动引擎吧!

engine.run()

end

坚持的第二天

目标是完成一个小游戏

respect by myself

分类:
前端
标签: