Я пытаюсь внедрить компонент погружения видео в мой проект.
Я пытаюсь заставить камеру использовать правильные слои с этим
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.