-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (82 loc) · 3.66 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
const scene = new THREE.Scene();
const group = new THREE.Group();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 275;
camera.position.z = 120;
camera.position.x = 700;
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();
const material = new THREE.MeshBasicMaterial({ color: 0x0e0e0e });
const plane = new THREE.Mesh(new THREE.BoxGeometry(500, 0, 500), material);
plane.material.transparent = false;
group.add(plane);
function getRandomInt(max, min, negateNegative) {
const lowerBound = min || 0.5;
const num = Math.floor(Math.random() * max) + lowerBound;
const positiveOrNegative = Math.round(Math.random()) ? 1 : -1;
return !negateNegative ? num * positiveOrNegative : num;
};
const renderBuildings = (numOfBuildings) => {
const y = 80;
const geometry = new THREE.BoxGeometry(35, y, 20);
const wireframe = new THREE.WireframeGeometry(geometry);
const buildingOne = new THREE.LineSegments(wireframe);
buildingOne.material.depthTest = false;
buildingOne.material.opacity = 1;
buildingOne.material.transparent = false;
buildingOne.position.y = y / 2;
group.add(buildingOne);
for (let index = 0; index < numOfBuildings; index++) {
const x = getRandomInt(30, 10);
const y = getRandomInt(80, 10, true);
const z = getRandomInt(30, 10);
let geometry = new THREE.BoxGeometry(x, y, z);
const setY = new THREE.Matrix4().makeTranslation(0, 0, 0);
geometry.applyMatrix4(setY);
const wireframe = new THREE.WireframeGeometry(geometry);
const newBuilding = new THREE.LineSegments(wireframe);
newBuilding.material.depthTest = false;
newBuilding.material.opacity = 0.25;
newBuilding.material.transparent = true;
newBuilding.position.x = getRandomInt(200);
newBuilding.position.z = getRandomInt(200);
newBuilding.position.y = y/2;
group.add(newBuilding);
};
scene.add(group);
};
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderBuildings(50);
animate();
function animate() {
requestAnimationFrame(animate);
camera.aspect = window.innerWidth / window.innerHeight;
const rotationSpeed = 0.0025;
const x = camera.position.x;
const z = camera.position.z;
// camera.updateProjectionMatrix();
camera.position.x = x * Math.cos(rotationSpeed) + z * Math.sin(rotationSpeed);
camera.position.z = z * Math.cos(rotationSpeed) - x * Math.sin(rotationSpeed);
// camera.lookAt(10, 20, 30);
camera.lookAt(0, 0, 0);
// camera.rotation.x += 1;
renderer.render(scene, camera);
}
</script>
</body>
</html>