视频渲染还没写,就开始写双屏渲染,有点跳啊~~~
- 功能描述:实现 2D360° / 2D180° 全景视频的双屏渲染
- 实现方式:
- 引入ThreeJs自带的 StereoEffects
- 初始化并放入render函数
上代码:
// 引入ThreeJs自带的双屏渲染插件
import { StereoEffect } from 'three/examples/jsm/effects/StereoEffect.js'
...
...
/**
* 开启左右眼
* 2D视频调用StereoEffect
* 3D视频另外处理
*/
enterVR() {
this.isStereo = true
this.effects = new StereoEffect(this.renderer)
this.effects.setSize(this.width, this.height)
}
/**
* 2D场景内容渲染
*/
render2D() {
// 视角控制插件
this.controls && this.controls.update()
if (this.isStereo) {
// 开启双屏渲染
this.effects.render(this.scene, this.camera)
} else {
this.renderer.render(this.scene, this.camera)
}
}
看效果图: