Question

我一般对A框架和HTML还是陌生的。我想将视频流传输到A帧中的对象以进行VR观看。我目前正在使用mjpg-streamer进行流式传输。即使http://IP:port/video正在流式传输视频，下面的代码也仅显示白色球体（但将显示类似one的图像）。

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <!-- <script src="foo-component.js"></script> -->
  </head>
  <body>
    <a-scene>

        <a-sphere src="http://IP:port/video" position="0 0 -4" radius="2" segments-height="53"></a-sphere>


    </a-scene>
  </body>
</html>

看着这个example使我觉得我需要创建一个可自我更新并将其包含在场景中的组件（<a-entity foo></a-entity>，但是当我打开html时什么也不显示。我创建的组件如下所示：

AFRAME.registerComponent('foo', {
    schema: {
        width: { type: 'number', default: 10 },
        height: { type: 'number', default: 10 },
        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("http://IP:port/video");
    }
});

使用A帧流式传输MJPG

0 个答案: