タグ: VR

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);