-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (96 loc) · 3.25 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
109
110
111
112
113
114
115
116
117
<html>
<head>
<title>Procedural Surface</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/perlin.js"></script>
<script>
// @author PWhiddy
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 10000 );
// Move camera back so we are looking at the origin
camera.position.z = 30;
var time = 0.0;
noise.seed(Math.random());
// The threejs webgl renderer
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor( 0xffffff );
// Tell renderer the dimensions of our screen
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
// Attach renderer to DOM element
document.body.appendChild( renderer.domElement );
// adding orbit controls to allow camera movement
var controls = new THREE.OrbitControls( camera, renderer.domElement );
// Create starting plane geometry with
// 100 width and height segments
geometry = new THREE.PlaneGeometry(20,20,100,100);
console.log(geometry);
// The material properties of our object
var material = new THREE.MeshStandardMaterial( { color: 0x77aa33, side:
THREE.DoubleSide, wireframe: false } );
// Use our geometry and material to create a mesh
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x += Math.PI/2;
mesh.rotation.x += 0.3;
// Add mesh to the scene
scene.add( mesh );
/* Create a point light source with color 0xdddddd, intesity 0.5 */
var pointLight = new THREE.PointLight(0xdddddd, 0.5);
scene.add(pointLight);
// Adjust light position to nicely illuminate object
pointLight.position.y = 70;
pointLight.position.x = 70;
/* Ambient lighting */
var hemisphereLight = new THREE.HemisphereLight(0x8899cc, 0x334455);
scene.add(hemisphereLight);
//*/
// Use this function to distort the plane
function graphZ(v,t) {
let result = 0;
// result = 5*Math.sin(v.x*0.3);
// result = noise.simplex3( 0.1*v.x+1, 0.1*v.y-1, 1 );
result = terrain(v);
return result;
}
function terrain(v) {
let noiseOctaves = 5;
let a = 0.0;
let scale = 2.0;
let freq = 0.05;
// apply multiple octaves of noise
for (var n = 0; n < noiseOctaves; n++) {
a += Math.abs(scale*noise.simplex3( v.x*freq + 2.4 ,
v.y*freq - 1.3, Date.now()*0.0002));
scale *= 0.5;
freq *= 2.0;
}
return 3.5*Math.pow(Math.sin(a*4)+1.5, 0.2);
}
// Our rendering loop
var render = function () {
// Rendering function is called each time the
// browser requests a new frame
requestAnimationFrame( render );
controls.update();
time += 0.0005;
// Update vertices z coordinate
for (var i = 0; i < geometry.vertices.length; i++ ) {
var v = geometry.vertices[i];
geometry.vertices[i].z = graphZ(v);
}
geometry.verticesNeedUpdate = true;
geometry.computeVertexNormals();
// Render our scene
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>