This is the first day of my participation in Gwen Challenge

What is Oasis Engine?

“Oasis Engine is the Web first, mobile first interactive/creation platform of Ant Group Web 3D interactive graphics Engine. Use component systems architecture and strive for ease of use and lightweight.”

Technology stack

Oasis Engine + Vue CLI +vue3 + ts

Create an Oasis Engine project

Select a path where the project is stored and start creating the project for example:

vue create oasis-vue

The project name is given here as oASIS-vue

After entering the above commands, enter the vUE project creation process. The following appears

The third option is Manually select Features custom installation

Select custom installation and go to Next Step

So here we choose

  1. Choose Vue version
  2. Babel (high-level syntax converted to low-level syntax)
  3. TypeScript (TypeScript)
  4. Linter/Formatter (code style, format verification)

And then go to the next step

  • Choose a version of Vue.js that you want to start the project with 3.x

    Select version 3.xCopy the code

  • Use class-style component syntax? Yes

    Do you want to use Class style decorators?Copy the code

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

  • Pick a linter / formatter config: Standard

    Here we choose the Standard configuration "ESLint + Standard Config" or whateverCopy the code

  • Pick additional lint features: Lint on save

    So here we're going to save and check "Lint on Save"Copy the code

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

    This step is to ask Babel, postCSS, esLint if these configurations are separate configuration files or In package.json files. Here we select "In dedicated Config files".Copy the code

  • Save this as a preset for future projects? No

    When asked if the same configuration will be used for future projects, we select NoCopy the code

So far, the VUE project has been created, everyone has modified the configuration according to their own needs, we wait for the project to download the dependencies, and when the project is built we start to integrate Oasis Engine

Go to the project root directory (Oasis-vue) and execute the following command:

npm install –save oasis-engine

At this point, all installations are complete.

Now make some substitutions to the code

Replace app.vue with

<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>

Copy the code

Create a folder oasis under SRC to hold the OASIS TS files

Create index.ts in the OASIS folder

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

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

  // Set screen adaptation
  engine.canvas.resizeByClientSize()

  // Get the scene root entity
  const scene = engine.sceneManager.activeScene
  const rootEntity = scene.createRootEntity('root')

  // Create a camera entity
  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)

  // Create an entity to mount directional light
  const lightEntity = rootEntity.createChild('light')

  // Create a directional light component
  const directLight = lightEntity.addComponent(DirectLight)
  directLight.color = new Color(1.0.1.0.1.0)
  directLight.intensity = 0.5

  // Control the light direction by the rotation Angle of the light entity
  lightEntity.transform.rotation = new Vector3(45.45.45)

  // Create a cube entity
  const cubeEntity = rootEntity.createChild('cube')
  const cube = cubeEntity.addComponent(MeshRenderer)
  cube.mesh = PrimitiveMesh.createCuboid(engine, 2.2.2)
  cube.setMaterial(new BlinnPhongMaterial(engine))

  // Start the engine
  engine.run()
}

Copy the code

Copy the sample code to index.ts

Now that all the preparation is done, we can run the program and see what happens.

To run the program

Run the program by executing the following command

npm run serve

After successful compilation, the following figure is displayed

The following figure is displayed after you open http://localhost:8080/ in the browser

end

If there is a next issue

Let me explain my understanding of some parameters in index.ts.