從0開始的Oasis Engine學習筆記（三） —— VR實現

這是我參與更文挑戰的第3天，活動詳情查看： 更文挑戰

前邊兩篇文字簡單介紹了一下怎麼搭建Oasis-vue項目，和Oasis基本參數的介紹。本文咱們來說一下用Oasis來實現VR效果。

看到三種前端實現VR全景看房的方案！說不定哪天就用得上！裏介紹了3種前端實現VR的方法，受益不淺。我這裏也來介紹一種，使用Oasis Engine天空盒實現VR的方法。

安裝controls組件

那麼本文就來演示下若是作到這個功能，咱們先作一下準備工做，安裝Oasis Engine 官方提供的擴展包 @oasis-engine/controls 控制器

npm i @oasis-engine/controls --save

安裝完成後，在項目中引用

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

OrbitControl是Oasis控制視角的一個組件，和其餘的組件使用方法同樣：綁定在實體上

咱們這裏將OrbitControl綁定在相機實體上

const cameraEntity = rootEntity.createChild('camera_entity')
  cameraEntity.transform.setPosition(0, 0, 1)
  cameraEntity.addComponent(Camera)
  cameraEntity.addComponent(OrbitControl)
複製代碼

準備工做到這裏就準備完成了，接下來就是Oasis的天空盒

天空盒

什麼是天空盒

在實時渲染中，若是想要繪製很是遠的物體，例如遠處的山，天空等，隨着觀察者的距離的移動，物體大小是幾乎沒有變換的。這類場景就很是適合用天空盒技術實現。

天空盒原理

天空盒本質就是一個立方體，每一個面上貼一張圖片，實際渲染的時候，立方體始終罩在相機周圍，這樣不管相機怎麼轉動，始終可以看到背景，基於此咱們也可使用天空盒來很容易實現VR效果

對應關係
px	right
nx	left
py	up
ny	down
pz	front
nz	back

天空盒示例

const cubeTextureResource = {
    type: AssetType.TextureCube,
    urls: [
      //圖片順序： 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')
    ]
  }
複製代碼

咱們首先須要按順序加載6張立方體貼圖，並申明類型爲AssetType.TextureCube

在Oasis V0.4 中將背景相關的設置從相機組件中移動到場景屬性中，因此使用以下代碼獲取到 background

const scene = engine.sceneManager.activeScene;
    const { background } = scene;
複製代碼

調用引擎 ResourceManager 實例的 load 方法將貼圖加載到天空盒模型上，以下：

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)
    })
複製代碼

完整代碼

import {
  Camera,
  PrimitiveMesh,
  WebGLEngine,
  AssetType,
  TextureCubeMap,
  SkyBoxMaterial,
  BackgroundMode
} from 'oasis-engine'
import { OrbitControl } from '@oasis-engine/controls'

export function createOasis (): void {
  // 初始化Engine
  const engine = new WebGLEngine('canvas')
  engine.canvas.resizeByClientSize()

  // 獲取場景根實體
  const scene = engine.sceneManager.activeScene
  const { background } = scene
  const rootEntity = scene.createRootEntity()

  // 建立一個相機實體
  const cameraEntity = rootEntity.createChild('camera_entity')
  cameraEntity.transform.setPosition(0, 0, 1)
  cameraEntity.addComponent(Camera)
  cameraEntity.addComponent(OrbitControl)

  // 啓動引擎
  engine.run()

  // 天空盒模型
  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)
    })
}

複製代碼

最終效果

end

good good study, day day up！！

respect by myself