mirror of
https://github.com/pissang/claygl.git
synced 2026-02-01 17:27:08 +00:00
73 lines
1.7 KiB
HTML
73 lines
1.7 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#stats {
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<script src="lib/stats.js"></script>
|
|
<script src="../dist/claygl.js"></script>
|
|
</head>
|
|
<body onload="init()">
|
|
<canvas id="main"></canvas>
|
|
<script>
|
|
function init() {
|
|
var dom = document.getElementById('main');
|
|
var width = (dom.width = window.innerWidth);
|
|
var height = (dom.height = window.innerHeight);
|
|
|
|
stats = new Stats();
|
|
document.body.insertBefore(stats.domElement, dom);
|
|
|
|
var app = clay.application.create('#main', {
|
|
devicePixelRatio: 1,
|
|
|
|
init: function (app) {
|
|
// Create camera
|
|
this._camera = app.createCamera([500, 500, 500], [0, 0, 0], 'ortho', [
|
|
width,
|
|
height,
|
|
10000
|
|
]);
|
|
|
|
var cnt = 100;
|
|
var distance = 20;
|
|
var size = 10 / 2;
|
|
var material = app.createMaterial({
|
|
color: 'red',
|
|
shader: 'clay.basic'
|
|
});
|
|
for (var i = 0; i < cnt; ++i) {
|
|
for (var j = 0; j < cnt; ++j) {
|
|
var cube = app.createCube(material);
|
|
cube.position.set((i - cnt / 2) * distance, (j - cnt / 2) * distance, 0);
|
|
cube.scale.set(size, size, size);
|
|
}
|
|
}
|
|
},
|
|
|
|
loop: function (app) {
|
|
stats.end();
|
|
stats.begin();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|