|
Home - Old Man Programmer
| Displaying demos/square/big.html
<!DOCTYPE HTML>
<html>
<head>
<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;
// if (camera.position.x < -(psize/2)) camera.position.x += psize;
break;
case 38: // up
camera.position.y += 10;
// if (camera.position.y > ((psize/2)-106)) camera.position.y = ((psize/2)-106);
break;
case 39: // right
camera.position.x += 10;
// if (camera.position.x > (psize/2)) camera.position.x -= psize;
break;
case 40: // down
camera.position.y -= 10;
// if (camera.position.y < -(106+(psize/2))) camera.position.y = -(106+(psize/2));
break;
}
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}
var psize = 2048;
Map.makemap(16, 128);
// 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/2));
camera.position.x = 0;
camera.position.z = 256;
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);
}
if (x == 0 || y == 0) c = 0xFF0000;
f[x+(y*Map.mapsize)].color = new THREE.Color(c);
}
}
var d = Math.sqrt(psize*psize*2);
var coords = [
{x:-d,y:0}, {x:-d/2,y:-d/2}, {x:0,y:-d}, {x:-d/2,y:d/2}, {x:0, y:0},
{x:d/2,y:-d/2}, {x:0,y:d}, {x:d/2,y:d/2}, {x:d,y:0}
];
var plane = null;
for(var c = 0; c < coords.length; c++) {
var p = new THREE.Mesh(m, new THREE.MeshBasicMaterial({vertexColors: true, fog: false}));
if (!plane) plane = p;
p.position.x = coords[c].x;
p.position.y = coords[c].y;
p.rotation.z = 45 * (Math.PI / 180);
scene.add(p);
}
// for(var r = -psize; r <= psize; r+=psize) {
// for(var c = -psize; c <= psize; c+=psize) {
// var p = new THREE.Mesh(m, new THREE.MeshBasicMaterial({vertexColors: true, fog: false}));
// p.position.x = c;
// p.position.y = r;
// p.rotation.z = 45 * (Math.PI / 180);
// scene.add(p);
// }
// }
// var plane = new THREE.Mesh(m, new THREE.MeshBasicMaterial({vertexColors: true, fog: false}));
// plane.overdraw = true;
// scene.add(plane);
//
// var plane2 = new THREE.Mesh(m, new THREE.MeshBasicMaterial({vertexColors: true, fog: false}));
// plane2.position.x = 128;
// plane2.position.y = 0;
// scene.add(plane2);
// var light = new THREE.PointLight(0xFFFFFF, 2, 500);
// light.position.set(50,50, 300);
// scene.add(light);
renderer.render(scene, camera);
// animate();
// this function is executed on each animation frame
// revolutions per second
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
requestAnimationFrame(function(){
animate();
});
}
</script>
</body>
</html>
|