Skip to content

Instantly share code, notes, and snippets.

@staltz
Created June 22, 2016 15:06
Show Gist options
  • Save staltz/be54dd5a78efb6742a1cd785ec53e0c0 to your computer and use it in GitHub Desktop.
Save staltz/be54dd5a78efb6742a1cd785ec53e0c0 to your computer and use it in GitHub Desktop.
A-Frame + Cycle.js demo
import xs from 'xstream';
import Cycle from '@cycle/xstream-run';
import {h, makeDOMDriver} from '@cycle/dom';
require('aframe');
function main(sources) {
let vdom$ = xs.periodic(16).startWith(0).map(i =>
h('a-scene', [
h('a-sphere', {
attrs: {
position: `0 ${i / 100} -1`,
radius: '1.25',
color: '#EF2D5E'
}
}),
h('a-box', {
attrs: {
position: '-1 0.5 1',
rotation: '0 45 0',
width: '1',
height: '1',
depth: '1',
color: '#4CC3D9'
}
}),
h('a-cylinder', {
attrs: {
position: '1 0.75 1',
radius: '0.5',
height: '1.5',
color: '#FFC65D'
}
}),
h('a-plane', {
attrs: {
rotation: '-90 0 0',
width: '4',
height: '4',
color: '#7BC8A4'
}
}),
h('a-sky', { attrs: {color: '#ECECEC'} })
])
);
return {
DOM: vdom$
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#main-container')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment