-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (98 loc) · 3.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js"></script>
<script src="lodash.js"></script>
<script>
var camera, scene, renderer;
function setup() {
document.body.style.backgroundColor = '#d7f0f7';
setupThreeJS();
setupWorld();
requestAnimationFrame(function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
});
}
function setupThreeJS() {
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x9db3b5, 0.002);
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
1,
Math.pow(10, 4)
);
camera.position.y = 400;
camera.position.z = 400;
camera.rotation.x = - 45 * Math.PI / 180;
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true
renderer.setSize(
window.innerWidth,
window.innerHeight
);
document.body.appendChild(renderer.domElement);
}
function setupWorld() {
// Floor
var geo = new THREE.PlaneGeometry(2000, 2000, 20, 20);
var mat = new THREE.MeshBasicMaterial({ color: 0x9db3b5, overdraw: true });
var floor = new THREE.Mesh(geo, mat);
floor.rotation.x = - 90 * Math.PI / 180;
floor.receiveShadow = true;
scene.add(floor);
// original building
var geometry = new THREE.CubeGeometry(1,1,1);
geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5, 0));
var material = new THREE.MeshPhongMaterial({
overdraw: true,
color: 0xcccccc
});
var light = new THREE.DirectionalLight(0xf6e86d, 1);
light.position.set(1, 3, 2);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.position.set(500, 1500, 1000);
light.shadowCameraFar = 2500;
// DirectionalLight only; not necessary for PointLight
light.shadowCameraLeft = -1000;
light.shadowCameraRight = 1000;
light.shadowCameraTop = 1000;
light.shadowCameraBottom = -1000;
light.shadowCameraVisible = true;
scene.add(light);
// clone buildings
var cityGeometry = new THREE.Geometry();
cityGeometry.castShadow = true;
cityGeometry.receiveShadow = true;
_.times(300, function (index) {
console.log('adding building',index);
var building = new THREE.Mesh(geometry.clone());
building.position.x = Math.floor(Math.random() * 200 - 100) * 4;
building.position.z = Math.floor(Math.random() * 200 - 100) * 4;
building.scale.x = Math.random() * 50 + 10;
building.scale.y = Math.random() * building.scale.x * 8 + 8;
building.scale.z = building.scale.x;
THREE.GeometryUtils.merge(cityGeometry, building);
});
var city = new THREE.Mesh(cityGeometry, material);
scene.add(city);
}
setup();
</script>
</body>
</html>