-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
114 lines (113 loc) · 5.1 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
<!doctype html>
<html>
<head>
<title>mod1</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
canvas { display: block; overflow:hidden;}
.dashboard {margin: 20px; position: absolute; }
</style>
</head>
<body>
<console>
</console>
<div class="dashboard">
<a href="" ><h1>mod1</h1></a>
<p>Height:<br><input type=range id=height min=0 max=500 step=10 value=0 /></p>
<p>X pos:<br><input type=range id=x-pos min=0 max=1024 step=10 value=0 /></p>
<p>Y pos:<br><input type=range id=y-pos min=0 max=1024 step=10 value=0 /></p>
<button class="btn btn-default" type="button" id="generateHill" onclick="genHill()">Generate New Hill</button>
<form class="form-inline">
<label for="noise-lvl">Noise Level</label>
<select class="form-control" id="noiselvl">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<button class="btn btn-default" type="button" id="noise" onclick="addNoise()">Add Noise</button>
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src=http://mrdoob.github.io/three.js/build/three.min.js ></script>
<script src=http://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js ></script>
<script src=http://mrdoob.github.io/three.js/examples/js/libs/stats.min.js ></script>
<script src="./ground.js"></script>
<script src="./water.js"></script>
<script>
var scene = new THREE.Scene();
THREE.ImageUtils.crossOrigin = 'anonymous';
var texture = THREE.ImageUtils.loadTexture("textures/greenbark.jpg");
texture.minFilter = texture.magFilter = THREE.NearestFilter;
texture.needsUpdate = true;
var quality = 32, step = 1024 / quality;
var soil;
function updateSoil() {
var quality = 32, step = 1024 / quality;
var geometry = new THREE.PlaneGeometry( 1024, 1024, quality - 1, quality - 1);
for (var i = 0, l = geometry.vertices.length; i < l; i++) {
var x = i % quality, y = Math.floor( i / quality );
geometry.vertices[i].z = ground[ ( x * step ) + ( y * step ) * 1024];
}
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
geometry.computeFaceNormals();
geometry.computeVertexNormals();
var material = new THREE.MeshBasicMaterial( {map: texture, side:THREE.DoubleSide } );
//scene.remove( soil );
var soil = new THREE.Mesh(geometry, material);
scene.add( soil );
return soil;
}
soil = updateSoil();
//for (var i = 0; i < 20; i++)
// fluid();
var waterHeight = new THREE.PlaneGeometry(1024, 1024, quality - 1, quality - 1);
for (var i = 0, l = waterHeight.vertices.length; i < l; i++) {
var x = i % quality, y = Math.floor( i / quality );
waterHeight.vertices[i].z = waterNew[( x * step ) + ( y * step ) * 1024] + ground[( x * step ) + ( y * step ) * 1024] - 0.5;
}
waterHeight.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
var waterMat = new THREE.MeshBasicMaterial( { color: 0x7094FF, opacity: 0.5, side: 2, transparent: true } );
var water = new THREE.Mesh(waterHeight, waterMat);
//scene.add( water );
var axisHelper = new THREE.AxisHelper( 50 );
scene.add( axisHelper );
//Generate camera
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 10000 );
camera.position.set(1000, 1000, 1000);
//Print scene
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xFFFFFF, 1);
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
document.body.appendChild( renderer.domElement );
var render = function() {
requestAnimationFrame( render );
renderer.render(scene, camera);
}
render();
var x = 0;
function genHill() {
var r = $("#height").val();
var x = $("#x-pos").val();
var y = $("#y-pos").val();
if (r) {
operationList.push({gen: generateHill, arg: [x, y, r]});
ground = generateGround(1024, operationList);
scene.remove( soil );
soil = updateSoil();
}
}
function addNoise() {
var coef = $("#noiselvl").val();
operationList.push({gen: generateNoise, arg: [coef / 10, 0, 0]});
console.log(operationList);
ground = generateGround(1024, operationList);
scene.remove( soil );
soil = updateSoil();
};
</script>
</html>