wavey-wind/hoot/index.html

57 lines
2.1 KiB
HTML

<html>
<head>
<meta charset="UTF-8">
<title>wavey wind - hoot</title>
<style type="text/css">
body { margin: 0; }
</style>
</head>
<body>
<div id="anim-container"></div>
<script src="node_modules/three/build/three.min.js"></script>
<!--script src="node_modules/osc/dist/osc-browser.js"></script>
<script src="osctl.js"></script!-->
<script type="text/javascript" src="reflect.js"></script>
<!-- Load hoot! -->
<script type="text/javascript">
function renderFrame() {
requestAnimationFrame(renderFrame);
window.render.call();
}
async function init() {
var exports = await Scheme.load_main('ww.wasm', {}, {
console: {
log(str) { console.log(str); }
},
document: {
body() { return document.body; },
createTextNode: Document.prototype.createTextNode.bind(document)
},
window: {
getWidth() { console.log('get sirina!', window.innerWidth); return window.innerWidth; },
getHeight() { console.log('get visina!', window.innerHeight); return window.innerHeight; },
},
element: {
appendChild(parent, child) { return parent.appendChild(child); }
},
THREE: {
Quaternion() { return new THREE.Quaternion; },
Scene() { return new THREE.Scene; },
PerspectiveCamera(fov, aspect, near, far) { return new THREE.PerspectiveCamera(fov, aspect, near, far); },
WebGLRenderer(params) { return new THREE.WebGLRenderer(params); },
rendererSetSize(renderer, width, height) { renderer.setSize(width, height); },
rendererSetClearColor(renderer, color, alpha) { renderer.setClearCOlor(color, alpha); }
}
});
console.log('exports', exports);
[window.render, window.initScene] = exports;
//console.log('init scene!', window.initScene);
//window.initScene.call()
renderFrame();
}
addEventListener('load', init);
</script>
</body>
</html>