这是我参与更文挑战的第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里边的一些参数我的理解。