从0开始的Oasis Engine学习笔记（一） —— 创建项目

这是我参与更文挑战的第1天，活动详情查看：更文挑战

什么是Oasis Engine？

“Oasis Engine是蚂蚁集团 Web 3D 互动图形引擎以 Web 为先，移动为先的互动/创作平台。使用组件系统架构，并且追求易用和轻量”

技术栈

Oasis Engine + Vue CLI +vue3 + ts

创建一个Oasis Engine项目

选取一个项目存放的路径，然后开始创建项目例如：

vue create oasis-vue

这里将项目名定为：oasis-vue

输入完上述命令之后进入vue项目的创建过程。出现以下内容

第三个选项是 “Manually select features”自定义安装

选择自定义安装，进入下一步选择

这里我们选择

Choose Vue version（选择Vue版本）
Babel（高级的语法转换为低级的语法）
TypeScript（TypeScript）
Linter / Formatter（代码风格、格式校验）

然后进入下一步

Choose a version of Vue.js that you want to start the project with 3.x
```
选择版本3.x
复制代码
```

Use class-style component syntax? Yes

选择是否使用Class风格装饰器？
复制代码

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

Pick a linter / formatter config: Standard

这里我们选择标准配置“ESLint + Standard config”或者其他
复制代码

Pick additional lint features: Lint on save

这里我们选择保存时检查“Lint on save”
复制代码

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

这一步是询问 babel, postcss, eslint这些配置是单独的配置文件还是放在package.json 文件中，这里我们选择“In dedicated config files”
复制代码

Save this as a preset for future projects? No

询问时候以后创建项目是否也采用同样的配置，这里我们选No
复制代码

到目前为止，vue项目是创建完成了，大家根据自己需求修改配置，我们等待项目下载依赖包，等项目构建完毕我们开始集成Oasis Engine

进入项目根目录（oasis-vue），然后执行下列命令：

npm install --save oasis-engine

至此，所有的安装都已经完成了。

现在对代码进行一些替换

将App.vue里替换成

<template>
  <canvas style="width: 100vw; height: 100vh" id="canvas"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { createOasis } from './oasis'

export default defineComponent({
  name: 'App',
  components: {},
  mounted: () => {
    createOasis()
  }
})
</script>

<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>

复制代码

在src下创建文件夹oasis用来放oasis的ts文件

在oasis文件夹下创建 index.ts

import {
  DirectLight,
  BlinnPhongMaterial,
  Camera,
  MeshRenderer,
  PrimitiveMesh,
  Vector3,
  WebGLEngine,
  Color
} from 'oasis-engine'

export function createOasis (): void {
  const engine = new WebGLEngine('canvas')

  // 设置屏幕适配
  engine.canvas.resizeByClientSize()

  // 获取场景根实体
  const scene = engine.sceneManager.activeScene
  const rootEntity = scene.createRootEntity('root')

  // 创建一个相机实体
  const cameraEntity = rootEntity.createChild('camera_entity')
  cameraEntity.transform.position = new Vector3(0, 5, 10)
  cameraEntity.transform.lookAt(new Vector3(0, 0, 0))
  cameraEntity.addComponent(Camera)

  // 创建一个实体用来挂载方向光
  const lightEntity = rootEntity.createChild('light')

  // 创建一个方向光组件
  const directLight = lightEntity.addComponent(DirectLight)
  directLight.color = new Color(1.0, 1.0, 1.0)
  directLight.intensity = 0.5

  // 通过光照实体的旋转角度控制光线方向
  lightEntity.transform.rotation = new Vector3(45, 45, 45)

  // 创建立方体实体
  const cubeEntity = rootEntity.createChild('cube')
  const cube = cubeEntity.addComponent(MeshRenderer)
  cube.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2)
  cube.setMaterial(new BlinnPhongMaterial(engine))

  // 启动引擎
  engine.run()
}

复制代码

将示例代码复制到index.ts

所有的准备工作都做完了，接下来我们就可以运行程序看效果了。

运行程序

执行以下命令，运行程序

npm run serve

编译成功后，如下图所示

在浏览器打开http://localhost:8080/ 后如下图所示

end

如果有下一期的话

我讲一下我对index.ts里边的一些参数我的理解。