|
Home - Old Man Programmer
| Displaying demos/hex/index.html
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="../threejs/three.min.js"></script>
<script src='control.js'></script>
<script src='hex.js'></script>
<!-- <script src='map.js'></script>-->
</head>
<body onkeydown='key(event);' onmousedown='mdown(event);' onmouseup='mup(event);' onmousemove='mmove(event);'>
<div id="container"></div>
<script defer="defer">
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth-5, window.innerHeight-5);
document.getElementById("container").appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4096);
camera.position.y = -20;
camera.position.x = 0;
camera.position.z = 50;
camera.rotation.x = 45 * (Math.PI / 180);
var scene = new THREE.Scene();
field = new THREE.Object3D();
field.position.x = 0;
field.position.y = 0;
var hexsize = 10;
var hwidth = hexsize * 2;
var hheight = Math.sqrt(3)/2 * hwidth;
var hdist = 3/4 * hwidth;
var vdist = hheight;
function rndcolor() {
return (R(256) << 16) | (R(256)<< 8) | R(256);
}
for(var r = 0; r < 10; r ++) {
for(var c = 0; c < 10; c ++) {
var mesh = new THREE.Mesh(new THREE.ShapeGeometry( hex(hexsize) ), new THREE.MeshBasicMaterial({vertexColors: true, color: rndcolor(), overdraw: true}));
mesh.position.set(c*(hdist*2)+((r%2) * hdist), (r*(vdist/2)), 0);
field.add(mesh);
}
}
scene.add(field);
renderer.render(scene, camera);
</script>
</body>
</html>
|