Aframe Stereo двойной интерфейс - PullRequest
0 голосов
/ 09 ноября 2019

Я пытаюсь внедрить компонент погружения видео в мой проект.

Я пытаюсь заставить камеру использовать правильные слои с этим

if(this._is3D){
  this.el.sceneEl.camera.layers.enable(1)
}
else
  this.el.sceneEl.camera.layers.enable(0)

Компонент, который я использовал на сферах для видео 3D 180, ниже

import AFRAME from 'aframe'
const THREE = window.THREE

AFRAME.registerComponent('stereo', {
  schema: {
    eye: { type: 'string', default: 'left'},
    mode: { type: 'string', default: 'full'},
    split: { type: 'string', default: 'horizontal'},
    enabled: { type: 'boolean', default: true},
  },

  _originalGeo: null,

  init: function(){
    this._originalGeo = this.el.object3D.children[0].geometry

    if(this.data.mode === 'half' && this.enabled)
      this.updateGeometry()
  },

  updateGeometry: function(){
    var object3D = this.el.object3D.children[0]

    // if half-dome mode, rebuild geometry (with default 100, radius, 64 width segments and 64 height segments)
    if (this.data.mode === 'half') {

      var geo_def = this.el.getAttribute('geometry')
      var geometry = new THREE.SphereGeometry(geo_def.radius || 100, geo_def.segmentsWidth || 64, geo_def.segmentsHeight || 64, Math.PI / 2, Math.PI, 0, Math.PI)

    }
    else {
      var geo_def = this.el.getAttribute('geometry')
      var geometry = new THREE.SphereGeometry(geo_def.radius || 100, geo_def.segmentsWidth || 64, geo_def.segmentsHeight || 64)
    }

    // Panorama in front

    object3D.rotation.y = Math.PI / 2

    // If left eye is set, and the split is horizontal, take the left half of the video texture. If the split
    // is set to vertical, take the top/upper half of the video texture.

    if (this.data.eye === 'left') {
      var uvs = geometry.faceVertexUvs[ 0 ]
      var axis = this.data.split === 'vertical' ? 'y' : 'x'
      for (var i = 0; i < uvs.length; i++) {
        for (var j = 0; j < 3; j++) {
          if (axis == 'x') {
            uvs[ i ][ j ][ axis ] *= 0.5
          }
          else {
            uvs[ i ][ j ][ axis ] *= 0.5
            uvs[ i ][ j ][ axis ] += 0.5
          }
        }
      }
    }


    if (this.data.eye === 'right') {
      var uvs = geometry.faceVertexUvs[ 0 ]
      var axis = this.data.split === 'vertical' ? 'y' : 'x'
      for (var i = 0; i < uvs.length; i++) {
        for (var j = 0; j < 3; j++) {
          if (axis == 'x') {
            uvs[ i ][ j ][ axis ] *= 0.5
            uvs[ i ][ j ][ axis ] += 0.5
          }
          else {
            uvs[ i ][ j ][ axis ] *= 0.5
          }
        }
      }
    }


    object3D.geometry = new THREE.BufferGeometry().fromGeometry(geometry)
  },
  reset: function(){
    this.el.object3D.children[0].geometry = this._originalGeo
  },

  // On element update, put in the right layer, 0:both, 1:left, 2:right (spheres or not)

  update: function(oldData){

    var object3D = this.el.object3D.children[0]
    var data = this.data

    if(oldData.mode === 'half' && this.data.mode === 'full')
      this.reset()

    if(this.data.mode === 'half')
      this.updateGeometry()

    if(data.eye === 'both'|| !data.enabled){
      object3D.layers.set(0)
    }
    else{
      object3D.layers.set(data.eye === 'left' ? 1 : 2)
    }

  },

})

Однако я получаю двойное видение лазера и других элементов на экране. С видео все в порядке, а стереоэффект действительно хорош, я просто хочу иметь там другой интерфейс.

В примере с Оскаром интерфейс отлично работает в VR. Но, похоже, он настроен с самого начала, а не обновляется позже, в зависимости от того, загружено ли видео 1803D или 3602D.

...