-
Notifications
You must be signed in to change notification settings - Fork 0
/
mastermaps.html
96 lines (73 loc) · 2.36 KB
/
mastermaps.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
<!doctype html>
<html lang="en">
<head>
<title>three.js - Jotunheimen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body { margin: 0; overflow: hidden; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/Stats.js"></script>
<script>
var width = window.innerWidth,
height = window.innerHeight;
var scene = new THREE.Scene();
var axes = new THREE.AxisHelper(100);
scene.add(axes);
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(20, -80, 100);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
var geometry = new THREE.PlaneGeometry(60, 60, 20, 20);
var newZ = undefined;
geometry.vertices.map(vertice => {
if (newZ === undefined) {
newZ = Math.random() * 20;
} else {
newZ += (Math.random() - 0.5);
}
vertice.z = newZ;
// console.log('***** vertice.z', vertice.z);
return vertice;
});
// for (var i = 0, l = geometry.vertices.length; i < l; i++) {
// geometry.vertices[i].z = Math.round(Math.random() * 20);
// }
var material = new THREE.MeshBasicMaterial({
color: 0x333333,
wireframe: true
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
var controls = new THREE.TrackballControls(camera);
document.body.appendChild( renderer.domElement );
var stats = new Stats();
stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );
plane.geometry.dynamic = true;
var counter = 0;
function render() {
stats.begin();
counter++;
if (counter > 0) {
for (var i = 0, l = plane.geometry.vertices.length; i < l; i++) {
plane.geometry.vertices[i].z += (Math.random()-0.5) / 10;
}
}
plane.geometry.verticesNeedUpdate = true;
// changes to the vertices
controls.update();
requestAnimationFrame(render);
stats.end();
// if (counter > 50) return;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>