This is the second day of my participation in the More text Challenge. For more details, see more text Challenge

In the last article, we built an Oasis Engine + Vue project. This article mainly introduces the index.ts code from Oasis in the last chapter.

Prior to the start

HTML+CSS

HTML+CSS is introduced before index.ts

Insert a line of Canvas tag code into the HTML template:

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

To make this Canvas element take up the entire screen, we add the following styles to the body.

body {
  margin: 0;
  overflow: hidden;
}
Copy the code

Understand the entities in Oasis

Everything in Oasis is an entity, the scene is an entity, the camera is an entity, light is an entity, rendering objects are an entity.

Understand the components in Oasis

Components in Oasis are bound to entities, giving them specific functionality

Understand coordinates in Oasis

The coordinate systems in Oasis are all right handed

start

The introduction of the module

To implement these functions, we need to introduce the following Oasis engine classes into our project

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

Creating an engine instance

  const engine = new WebGLEngine('canvas')
  engine.canvas.resizeByClientSize()
Copy the code

Create an engine instance with ‘canvas’ being the ID of the Canvas element.

Then reset the canvas width and height using the resizeByClientSize method (it will automatically adjust the canvas elements according to the width and height you set).

Create the scenario root node

  const scene = engine.sceneManager.activeScene
  const rootEntity = scene.createRootEntity('root')
Copy the code

Obtain the currently active scenario through the scenario manager of the engine engine.sceneManager.

Once the scenario is obtained, a root entity is created using the createRootEntity method of the scenario, on which subsequent entities are created.

Create a camera entity

  const cameraEntity = rootEntity.createChild('camera_entity')
Copy the code

This creates an entity, names it ‘camera_entity’ and stores it in the variable cameraEntity

In order for the cameraEntity to have camera functionality, we need to add the camera component to the entity using addComponent

  cameraEntity.addComponent(Camera)
Copy the code

Once created, the camera’s position and orientation are determined using the transform component built into the entity.

  cameraEntity.transform.position = new Vector3(0.5.10)
  cameraEntity.transform.lookAt(new Vector3(0.0.0))
Copy the code

Create a light entity

  const lightEntity = rootEntity.createChild('light')
  const directLight = lightEntity.addComponent(DirectLight)
Copy the code

Similarly, lighting is mounted to entities in the form of components. After creating the entity, add the DirectLight component

  directLight.color = new Color(1.0.1.0.1.0)
Copy the code

Here, the three parameters in Color (r, g, b) correspond to the ratio of red, green, and blue, between 1 and 0

For example, the red is (1,0,0).

Conversion to RGB

rgb(255, 85, 36)

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

  directLight.intensity = 0.5
Copy the code

The intensity method sets the intensity of light (too high and all light will be white)

  lightEntity.transform.rotation = new Vector3(45.45.45)
Copy the code

The direction of light is controlled by the rotation Angle of the light entity

Create a cube entity

  const cubeEntity = rootEntity.createChild('cube')
  const cube = cubeEntity.addComponent(MeshRenderer)
Copy the code

In the same way, rendering entities are mounted to entities as components.

  cube.mesh = PrimitiveMesh.createCuboid(engine)
  cube.setMaterial(new BlinnPhongMaterial(engine))
Copy the code

Sets the shape and material of the rendered entity

You can create the PrimitiveMesh type with the.mesh attribute

Such as:

Cube. Mesh = PrimitiveMesh. CreateCuboid (engine) is a cube

Cube. Mesh = PrimitiveMesh. CreateTorus (engine) is a circle

Start the engine

All set, let’s start the engine with one line of code!

engine.run()

end

The second day of persistence

The goal is to complete a small game

respect by myself