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

从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项目的创建过程。出现以下内容

image.png

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

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

image.png

这里我们选择

  1. Choose Vue version(选择Vue版本)
  2. Babel(高级的语法转换为低级的语法)
  3. TypeScript(TypeScript)
  4. 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

编译成功后,如下图所示

image.png

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

image.png

end

如果有下一期的话

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

分类:
前端
标签: