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

The first two articles briefly introduce how to set up oasIS-VUE project and the basic parameters of Oasis. In this article we will talk about using Oasis to achieve VR effects.

See three front-end VR panoramic house-watching scheme! You never know when you’ll need it! In the introduction of three front-end VR implementation methods, benefit. Here I will also introduce a way to use Oasis Engine skybox to achieve VR.

Install the controls assembly

In this article, we will demonstrate how to do this. First, we will do some preparatory work by installing the official Oasis Engine extension package @Oasis-Engine/Controls

npm i @oasis-engine/controls --save

When the installation is complete, reference it in your project

import { OrbitControl } from '@oasis-engine/controls'

OrbitControl is a component of the Oasis Control perspective that is used the same way as any other component: bound to an entity

Here we bind OrbitControl to the camera entity

  const cameraEntity = rootEntity.createChild('camera_entity')
  cameraEntity.transform.setPosition(0.0.1)
  cameraEntity.addComponent(Camera)
  cameraEntity.addComponent(OrbitControl)
Copy the code

The preparation is complete here, and the next step is Oasis’s Skybox

The sky box

What is a skybox

In real-time rendering, if you want to draw very far objects, such as mountains and sky in the distance, the size of the objects will hardly change as the distance of the observer moves. This is the kind of scenario that fits well with the Skybox technology.

Skybox principle

The skybox is essentially a cube with a picture on each side. When rendering, the cube is always draped around the camera, so that no matter how the camera rotates, the background is always visible

Corresponding relations between
px right
nx left
py up
ny down
pz front
nz back

Skybox example

  const cubeTextureResource = {
    type: AssetType.TextureCube,
    urls: [
      // Image order: px nx py ny pz nz
      require('.. /assets/px.png'),
      require('.. /assets/nx.png'),
      require('.. /assets/py.png'),
      require('.. /assets/ny.png'),
      require('.. /assets/pz.png'),
      require('.. /assets/nz.png')]}Copy the code

We first need to load the six cube maps in order and declare the type assetType.texturecube

In Oasis V0.4, background related Settings are moved from the camera component to the scene properties, so use the following code to get the background

    const scene = engine.sceneManager.activeScene;
    const { background } = scene;
Copy the code

Use the ResourceManager instance’s Load method to load the map to the Skybox model as follows:

  engine.resourceManager.load<TextureCubeMap[]>(cubeTextureResource)
    .then((cubeMap: any) = > {
      background.mode = BackgroundMode.Sky
      const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine))
      skyMaterial.textureCubeMap = cubeMap
      background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2.2.2)})Copy the code
The complete code
import {
  Camera,
  PrimitiveMesh,
  WebGLEngine,
  AssetType,
  TextureCubeMap,
  SkyBoxMaterial,
  BackgroundMode
} from 'oasis-engine'
import { OrbitControl } from '@oasis-engine/controls'

export function createOasis () :void {
  // Initialize the Engine
  const engine = new WebGLEngine('canvas')
  engine.canvas.resizeByClientSize()

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

  // Create a camera entity
  const cameraEntity = rootEntity.createChild('camera_entity')
  cameraEntity.transform.setPosition(0.0.1)
  cameraEntity.addComponent(Camera)
  cameraEntity.addComponent(OrbitControl)

  // Start the engine
  engine.run()

  // Skybox model
  const cubeTextureResource = {
    type: AssetType.TextureCube,
    urls: [
      'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5w6_Rr6ML6IAAAAAAAAAAAAAARQnAQ'.'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*TiT2TbN5cG4AAAAAAAAAAAAAARQnAQ'.'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*8GF6Q4LZefUAAAAAAAAAAAAAARQnAQ'.'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*D5pdRqUHC3IAAAAAAAAAAAAAARQnAQ'.'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_FooTIp6pNIAAAAAAAAAAAAAARQnAQ'.'https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*CYGZR7ogZfoAAAAAAAAAAAAAARQnAQ'
    ]
  }

  engine.resourceManager.load<TextureCubeMap[]>(cubeTextureResource)
    .then((cubeMap: any) = > {
      background.mode = BackgroundMode.Sky
      const skyMaterial = (background.sky.material = new SkyBoxMaterial(engine))
      skyMaterial.textureCubeMap = cubeMap
      background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2.2.2)})}Copy the code

The final result

end

Good good study, day day up!!

respect by myself