|
Home - Old Man Programmer
| Displaying demos/square/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='ascii'>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="../threejs/three.min.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 px, py, dflag = false;
function mdown(e) {
px = e.clientX;
py = e.clientY;
dflag = true;
}
function mup(e) {
dflag = false;
}
function mmove(e) {
if (dflag != true) return;
var x = e.clientX;
var y = e.clientY;
plane.rotation.z += 0.5 * (x-px) * Math.PI / 1000;
plane.rotation.x += 0.5 * (y-py) * Math.PI / 1000;
renderer.render(scene, camera);
px = x;
py = y;
}
function key(e) {
switch(e.keyCode) {
case 33:
camera.position.z += 10;
break;
case 34:
camera.position.z -= 10;
break;
case 37: // left
camera.position.x -= 10;
break;
case 38: // up
camera.position.y += 10;
break;
case 39: // right
camera.position.x += 10;
break;
case 40: // down
camera.position.y -= 10;
break;
case 32:
_animating = !_animating;
lastTime = (new Date()).getTime();
animate();
break;
}
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
var psize = 2048;
Map.makemap(10, 256);
// renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth-5, window.innerHeight-5);
document.getElementById("container").appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4096);
camera.position.y = -(106+(psize/4));
camera.position.x = 0;
camera.position.z = 256*3;
camera.rotation.x = 45 * (Math.PI / 180);
// scene
var scene = new THREE.Scene();
var m = new THREE.PlaneGeometry(psize, psize, Map.mapsize, Map.mapsize);
var v = m.vertices;
var f = m.faces;
for(var y = 0; y <= Map.mapsize; y++) {
for(var x = 0; x <= Map.mapsize; x++) {
var g = Map.grid[x%Map.mapsize][y%Map.mapsize];
var c;
v[x+(y*(Map.mapsize+1))].z = g/2; // < 30? 30: g;
if (y > Map.mapsize-1 || x > Map.mapsize-1) continue;
var p = (g/255);
if (p >= 0 && p <= 0.2) {
c = Map.fade(Map.waterStart, Map.waterEnd, 30, Math.floor(p* 100));
} else if (p > 0.2 && p <= 0.7) {
c = Map.fade(Map.grassStart, Map.grassEnd, 40, Math.floor(p * 100) - 20);
} else if (p > 0.7 && p <= 0.90) {
c = Map.fade(Map.mtnStart, Map.mtnEnd, 20, Math.floor(p * 100) - 70);
} else if (p > 0.90 && p <= 1) {
c = Map.fade(Map.rockStart, Map.rockEnd, 20, Math.floor(p * 100) - 90);
}
f[x+(y*Map.mapsize)].color = new THREE.Color(c);
}
}
var plane = new THREE.Mesh(m, new THREE.MeshBasicMaterial({vertexColors: true, fog: false}));
plane.position.x = 0;
plane.position.y = 0;
plane.rotation.z = 45 * (Math.PI / 180);
scene.add(plane);
renderer.render(scene, camera);
// this function is executed on each animation frame
// revolutions per second
var _animating = false;
var angularSpeed = 0.1;
var lastTime = 0;
function animate(){
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
plane.rotation.z += angleChange;
lastTime = time;
// render
renderer.render(scene, camera);
// request new frame
if (_animating) {
window.requestAnimationFrame(function(){ animate(); });
}
}
</script>
</body>
</html>
|