<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Wikipedia 3D</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="css/wb.css" type="text/css">
		<link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.8.15.custom.css" type="text/css">
		<script type="text/javascript"
		src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js"></script>
		<script type="text/javascript" src="js/query-min.js"></script>
		<script type="text/javascript" src="js/"></script>

	</head>
	<body>
		<script type="text/javascript">
if(!Detector.webgl)
Detector.addGetWebGLMessage();

var container, timer;

var camera, scene, webglRenderer;
var cameraCube, sceneCube;

var mesh, zmesh, lightMesh, geometry;
var spheres = [];

var directionalLight, pointLight;

var mouseX = 0;
var mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new LG.THREE.FirstPersonCamera({
fov : 33,
aspect : 800 / 600,
near : 1,
far : 30000,
//				target : this.ctarget,
lookSpeed : 1.8,
movementSpeed : 220,
noFly : true,
activeLook : false,
domElemnt : container,
verticalMin : Math.PI * 0.35,
verticalMax : Math.PI * 0.65
});
scene = new THREE.Scene();
plane = new THREE.Mesh(new THREE.PlaneGeometry(2200, 2200, 20, 20), new THREE.MeshBasicMaterial({
color : 0x339933,
wireframe : true
}));
plane.rotation.x = -90 * Math.PI / 180;
plane.position.y = -170;

scene.addObject(plane);

		pointLight = new THREE.PointLight(0xFFFFFF);
		pointLight.position.x = 300;
		pointLight.position.y = 1000;
		pointLight.position.z = 630;
		scene.addLight(pointLight);



var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( { model: "js/Building_97.js", callback: function( geometry ) { createScene( geometry) } } );

camera.Browser = {
offset : {
left : 0,
top : 0
},
width : window.innerWidth,
height : window.innerHeight,
click_items : [plane],
projector : new THREE.Projector()

};
plane.clicked=function(){
console.log("clicked");
camera.panTo(new THREE.Vector3(0,10,10),45,-10)
};
plane.mouseIn=function(){
};
plane.mouseOut=function(){
};

webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(window.innerWidth, window.innerHeight);
//webglRenderer.autoClear = false;
container.appendChild(webglRenderer.domElement);

}

function animate() {

requestAnimationFrame(animate);

render();

}

function render() {
timer = new Date().getTime() * 0.0001;

//webglRenderer.clear();

webglRenderer.render(scene, camera);

}
function createScene( geometry ) {

	var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
	console.log(mesh);
//	mesh.scale = new THREE.Vector3(20,20,20);
	mesh.scale.x = 25;
	mesh.scale.y = 25;
	mesh.scale.z = 25;
	mesh.position.y -=130;
	mesh.geometry.materials[10].transparent=true;
	
	scene.addObject(mesh);
}
		</script>
	</body>
</html>
