Skip to content

Instantly share code, notes, and snippets.

@xeno14
Created August 16, 2018 09:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xeno14/e6d180843776d47257c2193fd60e13de to your computer and use it in GitHub Desktop.
Save xeno14/e6d180843776d47257c2193fd60e13de to your computer and use it in GitHub Desktop.
aframe component for Motion JPEG streaming
// https://aframe.io/docs/0.8.0/introduction/writing-a-component.html
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) {
// reload image
this.mesh.material.map.img = this.getImage();
this.mesh.material.map.needsUpdate = true;
},
getImage: function() {
return this.loader.load("/?action=stream");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment