I've been working on a VR project that involves 360° videos in VR. My concept was to construct a sphere and apply a 360° video as the material.
I've already managed to create my own Sphere Component and map a 360° image onto it!
Similar to this:
<html>
<!--Information about Aframe library-->
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('mysphere', {
schema: {
width: {type: 'number', default: 10},
height: {type: 'number', default: 32},
depth: {type: 'number', default: 32}
},
/**
* Initial creation and setting of the mesh.
*/
init: function () {
var data = this.data;
var el = this.el;
// Create geometry.
this.geometry = new THREE.SphereGeometry(data.width, data.height, data.depth);
//Load Image
var texture = new THREE.TextureLoader().load( '3d50eke-360-panorama-pier-miami-bayside.jpeg.jpg' );
// Create material.
this.material = new THREE.MeshBasicMaterial({map: texture});
this.material.side = THREE.DoubleSide;
console.log();
// Create mesh.
this.mesh = new THREE.Mesh(this.geometry, this.material);
// Set mesh on entity.
el.setObject3D('mesh', this.mesh);
el.getObject3D('mesh').material = this.material;
}
});
</script>
<a-scene>
<a-camera position="0 6 2"></a-camera>
<a-entity mysphere
position="0 6 2">
</a-entity>
</a-scene>
</body>
</html>
Now, I'm looking for a way to avoid using a "video" tag and instead create it using THREE.VideoTexture to map it as a material on the sphere...
Does anyone have any ideas?