<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3d room</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<style type="text/css">
body {
background-color: white;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript">
keyDown = new Array();
for(i = 0; i < 300; i++) {
keyDown[i] = false;
}
document.onkeydown = function(event) {
keyDown[event.keyCode] = true;
}
document.onkeyup = function(event) {
keyDown[event.keyCode] = false;
}
var SEPARATION = 200,
AMOUNTX = 10,
AMOUNTY = 10,
camera, scene, renderer, angle = 90;
init();
function init()
{
var container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 0;
camera.position.x = 250;
camera.position.y = 170;
camera.target.position.x = 250;
camera.target.position.y = 150;
camera.target.position.z = 300;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var geometry1 = new THREE.Geometry();
geometry1.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,0,0) ) );
geometry1.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,0,0) ) );
geometry1.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,290,0) ) );
geometry1.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,290,0) ) );
geometry1.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,0,0) ) );
var geometry2 = new THREE.Geometry();
geometry2.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,0,600) ) );
geometry2.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,0,600) ) );
geometry2.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,290,600) ) );
geometry2.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,290,600) ) );
geometry2.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,0,600) ) );
var geometry3 = new THREE.Geometry();
geometry3.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,0,0) ) );
geometry3.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,0,600) ) );
var geometry4 = new THREE.Geometry();
geometry4.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,290,0) ) );
geometry4.vertices.push( new THREE.Vertex( new THREE.Vector3 (0,290,600) ) );
var geometry5 = new THREE.Geometry();
geometry5.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,0,0) ) );
geometry5.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,0,600) ) );
var geometry6 = new THREE.Geometry();
geometry6.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,290,0) ) );
geometry6.vertices.push( new THREE.Vertex( new THREE.Vector3 (500,290,600) ) );
var line1 = new THREE.Line( geometry1, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.addObject(line1);
var line2 = new THREE.Line( geometry2, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.addObject(line2);
var line3 = new THREE.Line( geometry3, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.addObject(line3);
var line4 = new THREE.Line( geometry4, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.addObject(line4);
var line5 = new THREE.Line( geometry5, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.addObject(line5);
var line6 = new THREE.Line( geometry6, new THREE.LineBasicMaterial( { color: 0x000000 } ) );
scene.addObject(line6);
renderer.render(scene, camera);
setTimeout('loop()', 1000/60);
}
function loop()
{
if (keyDown[38] == true) {
camera.position.x += Math.cos( (angle/360)*2*Math.PI ) * 5;
camera.target.position.x += Math.cos( (angle/360)*2*Math.PI ) * 5;
camera.position.z += Math.sin( (angle/360)*2*Math.PI ) * 5;
camera.target.position.z += Math.sin( (angle/360)*2*Math.PI ) * 5;
}
if (keyDown[40] == true) {
camera.position.x -= Math.cos( (angle/360)*2*Math.PI ) * 5;
camera.target.position.x -= Math.cos( (angle/360)*2*Math.PI ) * 5;
camera.position.z -= Math.sin( (angle/360)*2*Math.PI ) * 5;
camera.target.position.z -= Math.sin( (angle/360)*2*Math.PI ) * 5;
}
if (keyDown[37] == true) {
angle -=5;
camera.target.position.x = camera.position.x + Math.cos( (angle/360)*2*Math.PI ) * 300;
camera.target.position.z = camera.position.z + Math.sin( (angle/360)*2*Math.PI ) * 300;
//turn left
}
if (keyDown[39] == true) {
angle += 5;
camera.target.position.x = camera.position.x + Math.cos( (angle/360)*2*Math.PI ) * 300;
camera.target.position.z = camera.position.z + Math.sin( (angle/360)*2*Math.PI ) * 300;
// turn right
}
if (camera.position.x < 0)
{
camera.position.x = 0;
camera.target.position.x = camera.position.x + Math.cos( (angle/360)*2*Math.PI ) * 300;
camera.target.position.z = camera.position.z + Math.sin( (angle/360)*2*Math.PI ) * 300;
}
if (camera.position.x > 500)
{
camera.position.x = 500;
camera.target.position.x = camera.position.x + Math.cos( (angle/360)*2*Math.PI ) * 300;
camera.target.position.z = camera.position.z + Math.sin( (angle/360)*2*Math.PI ) * 300;
}
if (camera.position.z < 2)
{
camera.position.z = 2;
camera.target.position.x = camera.position.x + Math.cos( (angle/360)*2*Math.PI ) * 300;
camera.target.position.z = camera.position.z + Math.sin( (angle/360)*2*Math.PI ) * 300;
}
if (camera.position.z > 900)
{
camera.position.z = 900;
camera.target.position.x = camera.position.x + Math.cos( (angle/360)*2*Math.PI ) * 300;
camera.target.position.z = camera.position.z + Math.sin( (angle/360)*2*Math.PI ) * 300;
}
renderer.render(scene, camera);
setTimeout('loop()', 1000/60);
}
</script>
</body>
</html>