mirror of
https://github.com/pissang/claygl.git
synced 2025-12-08 21:26:11 +00:00
78 lines
2.2 KiB
HTML
78 lines
2.2 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>
|