Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
THREE.js scene setup with JSONLoader for OSM2WebGL demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="viewport"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<script src="//threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="main.js"></script>
</body>
</html>
(function() {
var viewport = document.querySelector('.viewport');
var scene, camera, renderer, loader, light, controls;
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 1,
FAR = 10000;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFShadowMap;
renderer.shadowMapAutoUpdate = true;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.y = 1000;
scene.add(camera);
controls = new THREE.OrbitControls(camera);
renderer.setSize(WIDTH, HEIGHT);
viewport.appendChild(renderer.domElement);
loader = new THREE.JSONLoader();
loader.load('map.js', function (geometry, materials) {
var mesh, material;
material = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(1, 1, 1);
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);
});
light = new THREE.DirectionalLight(0xffffff);
light.shadowCameraTop = -1000;
light.shadowCameraLeft = -1000;
light.shadowCameraRight = 1000;
light.shadowCameraBottom = 1000;
light.shadowCameraNear = 20;
light.shadowCameraFar = 10000;
light.shadowBias = -.0001;
light.shadowMapHeight = light.shadowMapWidth = 4096;
light.shadowDarkness = .5;
light.castShadow = true;
light.position.set(0, 1000, -400);
scene.add(light);
animate();
function animate() {
renderer.render(scene, camera);
controls.update();
requestAnimationFrame(animate);
}
})();
@DESYS21

This comment has been minimized.

Copy link

DESYS21 commented Oct 30, 2014

Hi! Where the map.js?

@7dir

This comment has been minimized.

Copy link

7dir commented Jan 9, 2017

@DESYS21 U should covert it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.