M5Camera Xの動画をA-FrameのVR空間内に表示させたいと思ったが、Motion JPEG stream形式だと、デフォルトの機能(image、video)では対応できなかった。
で、調べたところドンピシャのページを発見。仕組みはよく分からんけど、サンプル通りのコンポーネント作ったらすんなり表示できた!!
>> Use Motion JPEG stream as a source of 360 deg image
AFRAME.registerComponent('box', {
schema: {
width: { type: 'number', default: 1 },
height: { type: 'number', default: 1 },
depth: { type: 'number', default: 1 },
color: { type: 'color', default: '#AAA' }
},
init: function () {
var data = this.data;
var el = this.el;
this.loader = new THREE.TextureLoader();
this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);
this.material = new THREE.MeshPhongMaterial({
map: this.getImage()
});
this.material.needsUpdate = true;
this.mesh = new THREE.Mesh(this.geometry, this.material);
el.setObject3D('mesh', this.mesh);
},
tick: function (time, timeDelta) {
this.mesh.material.map.img = this.getImage();
this.mesh.material.map.needsUpdate = true;
},
getImage: function() {
return this.loader.load("ストリーム動画のパス");
}
サンプルでは立方体だが、下記の部分をいじれば、他のプリミティブでもいける。
this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);