-
Notifications
You must be signed in to change notification settings - Fork 4
/
Geometry.html
116 lines (93 loc) · 3.36 KB
/
Geometry.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
<html>
<head>
<title>Lighting</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/perlin.js"></script>
<script>
// @author PWhiddy
// A container to place our objects into
var scene = new THREE.Scene();
/*
* PerspectiveCamera( fov, aspect, near, far )
* fov — Camera vertical field of view.
* aspect — Camera aspect ratio.
* near — Camera near plane. (Objects outside the near and far plane won't be rendered)
* far — Camera far plane.
*/
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;
// 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
// 120 width and heigh 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, shading: THREE.SmoothShading, side:
THREE.DoubleSide, wireframe: false } ); // color is in hexidecimal
// Use our geometry and material to create a mesh
// (What's a mesh? https://en.wikipedia.org/wiki/Polygon_mesh)
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x += Math.PI/2;
// 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 - try disabling one of the lights to see each's contribution */
var hemisphereLight = new THREE.HemisphereLight(0x8899cc, 0x334455);
scene.add(hemisphereLight);
//*/
// 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];
var noiseOctaves = 9;
var a = 0.0;
var scale = 1.0;
var freq = 0.01;
// apply multiple octaves of noise
for (var n = 0; n < noiseOctaves; n++) {
a += Math.abs(scale*noise.simplex2( v.x*freq + 4.7 + time,
v.y*freq - 8.4 + time));
scale *= 0.5;
freq *= 2.0;
}
geometry.vertices[i].z = 3.5*Math.pow(Math.sin(a*40)+1.5, 0.2);
}
geometry.verticesNeedUpdate = true;
geometry.computeVertexNormals();
// Render our scene
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>