-
Notifications
You must be signed in to change notification settings - Fork 0
/
plane.html
129 lines (111 loc) · 3.78 KB
/
plane.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
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plane Test</title>
</head>
<script src="js/three.js"></script>
<script src="js/orbit.js"></script>
<script src="js/util.js"></script>
<script src="js/SimplexNoise.js"></script>
<script>
var planeWidth = 1000;
var WIDTH = 32 ;
var width = window.innerWidth, height = window.innerHeight - 4;
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 10000);
camera.position.z = 721;
camera.position.y = 1050;
camera.position.x = -876;
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var texLoader = new THREE.TextureLoader();
var orbitControls = new THREE.OrbitControls(camera);
orbitControls.autoRotate = false;
//Water
waterNormals = new THREE.TextureLoader().load( 'img/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
var waterTexture = texLoader.load("img/W.jpg");
waterTexture.wrapS = waterTexture.wrapT = THREE.RepeatWrapping;
waterTexture.repeat.set(10, 10);
var sandTexture = texLoader.load("img/Sand.jpg");
sandTexture.wrapS = sandTexture.wrapT = THREE.RepeatWrapping;
sandTexture.repeat.set(10, 10);
var sandMaterial = new THREE.MeshPhongMaterial( {
map: sandTexture,
side: THREE.DoubleSide,
combine: THREE.MixOperation,
depthTest: true } );
var waterMaterial = new THREE.MeshPhongMaterial( {
map: waterTexture,
side: THREE.DoubleSide,
transparent: false,
opacity: 0.8,
normalMap: waterNormals,
blending: THREE.NormalBlending,
depthTest: true } );
var waterGeometry = new THREE.PlaneGeometry(planeWidth, planeWidth, WIDTH, WIDTH);
var sandGeometry = new THREE.PlaneGeometry(planeWidth, planeWidth, WIDTH, WIDTH);
var sand = new THREE.Mesh(sandGeometry, sandMaterial);
var water = new THREE.Mesh(waterGeometry, waterMaterial);
water.position.y = 0;
water.rotation.x = Math.PI / 2;
sand.rotation.x = Math.PI/2;
sand.position.y = -50;
scene.add(sand);
scene.add(water);
//LIGHT
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0, 1000, 250);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
renderer.shadowMap.enable = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
scene.add(spotLight);
var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
var material = new THREE.MeshPhongMaterial( {color:0xff0000} );
boxMesh = new THREE.Mesh( geometry, material );
boxMesh.position.y = 150;
boxMesh.castShadow = true;
boxMesh.receiveShadow = true;
scene.add(boxMesh);
var simplex = new SimplexNoise();
renderer.setSize(width, height);
var t = 0;
var baseHeight = 10;
var speed = 64;
var xMove = WIDTH/4;
var yMove = WIDTH/4;
var factor = 20;
water.geometry.dynamic = true;
render();
function render() {
var V = water.geometry.vertices;
var L = WIDTH+1;
for (var x = 0; x < WIDTH+1; x++) {
for (var y = 0; y < WIDTH+1; y++) {
var smooth = simplex.noise3d(x / xMove, y / yMove, t/speed) * 0.5 + 0.5;
//var noise = simplex.noise3d(x / 4, y / 4, t/(speed/2)) * 0.5 + 0.5;
V[x+y*L].z = smooth * factor;
}
}
t++;
water.geometry.verticesNeedUpdate = true;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function start() {
document.body.appendChild(renderer.domElement);
}
</script>
<style>
* {
margin: 0;
}
</style>
<body onload="start()">
</body>
<body>
</body>
</html>