Hugging Face's logo

Spaces:
awacke1
/
DragDropThreeJS
Running

App Files Community
awacke1 commited on
Commit
9d07256
·
verified ·
1 Parent(s): 57fc85b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +135 -146
index.html CHANGED
@@ -1,215 +1,204 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <title>three.js webgl - shaders - ocean</title>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7
- <link type="text/css" rel="stylesheet" href="main.css">
8
- </head>
9
- <body>
10
 
11
- <div id="container"></div>
12
- <div id="info">
13
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean
14
- </div>
15
 
16
- <script type="importmap">
17
- {
18
- "imports": {
19
- "three": "../build/three.module.js",
20
- "three/addons/": "./jsm/"
21
- }
22
- }
23
- </script>
24
 
25
- <script type="module">
26
 
27
- import * as THREE from 'three';
28
 
29
- import Stats from 'three/addons/libs/stats.module.js';
 
 
 
30
 
31
- import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
32
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
33
- import { Water } from 'three/addons/objects/Water.js';
34
- import { Sky } from 'three/addons/objects/Sky.js';
35
 
36
- let container, stats;
37
- let camera, scene, renderer;
38
- let controls, water, sun, mesh;
39
 
40
- init();
41
- animate();
42
 
43
- function init() {
44
 
45
- container = document.getElementById( 'container' );
46
 
47
- //
 
 
 
 
 
48
 
49
- renderer = new THREE.WebGLRenderer();
50
- renderer.setPixelRatio( window.devicePixelRatio );
51
- renderer.setSize( window.innerWidth, window.innerHeight );
52
- renderer.toneMapping = THREE.ACESFilmicToneMapping;
53
- renderer.toneMappingExposure = 0.5;
54
- container.appendChild( renderer.domElement );
55
 
56
- //
57
 
58
- scene = new THREE.Scene();
 
59
 
60
- camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
61
- camera.position.set( 30, 30, 100 );
62
 
63
- //
64
 
65
- sun = new THREE.Vector3();
66
 
67
- // Water
68
 
69
- const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );
 
 
 
 
 
70
 
71
- water = new Water(
72
- waterGeometry,
73
- {
74
- textureWidth: 512,
75
- textureHeight: 512,
76
- waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
77
 
78
- texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
 
 
 
 
 
 
79
 
80
- } ),
81
- sunDirection: new THREE.Vector3(),
82
- sunColor: 0xffffff,
83
- waterColor: 0x001e0f,
84
- distortionScale: 3.7,
85
- fog: scene.fog !== undefined
86
- }
87
- );
88
 
89
- water.rotation.x = - Math.PI / 2;
90
 
91
- scene.add( water );
92
 
93
- // Skybox
 
 
94
 
95
- const sky = new Sky();
96
- sky.scale.setScalar( 10000 );
97
- scene.add( sky );
98
 
99
- const skyUniforms = sky.material.uniforms;
 
 
 
100
 
101
- skyUniforms[ 'turbidity' ].value = 10;
102
- skyUniforms[ 'rayleigh' ].value = 2;
103
- skyUniforms[ 'mieCoefficient' ].value = 0.005;
104
- skyUniforms[ 'mieDirectionalG' ].value = 0.8;
105
 
106
- const parameters = {
107
- elevation: 2,
108
- azimuth: 180
109
- };
110
 
111
- const pmremGenerator = new THREE.PMREMGenerator( renderer );
112
- const sceneEnv = new THREE.Scene();
113
 
114
- let renderTarget;
115
 
116
- function updateSun() {
 
117
 
118
- const phi = THREE.MathUtils.degToRad( 90 - parameters.elevation );
119
- const theta = THREE.MathUtils.degToRad( parameters.azimuth );
120
 
121
- sun.setFromSphericalCoords( 1, phi, theta );
 
122
 
123
- sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
124
- water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();
125
 
126
- if ( renderTarget !== undefined ) renderTarget.dispose();
 
 
127
 
128
- sceneEnv.add( sky );
129
- renderTarget = pmremGenerator.fromScene( sceneEnv );
130
- scene.add( sky );
131
 
132
- scene.environment = renderTarget.texture;
133
 
134
- }
135
 
136
- updateSun();
 
137
 
138
- //
 
139
 
140
- const geometry = new THREE.BoxGeometry( 30, 30, 30 );
141
- const material = new THREE.MeshStandardMaterial( { roughness: 0 } );
142
 
143
- mesh = new THREE.Mesh( geometry, material );
144
- scene.add( mesh );
 
 
 
 
145
 
146
- //
147
 
148
- controls = new OrbitControls( camera, renderer.domElement );
149
- controls.maxPolarAngle = Math.PI * 0.495;
150
- controls.target.set( 0, 10, 0 );
151
- controls.minDistance = 40.0;
152
- controls.maxDistance = 200.0;
153
- controls.update();
154
 
155
- //
156
 
157
- stats = new Stats();
158
- container.appendChild( stats.dom );
159
 
160
- // GUI
 
 
 
161
 
162
- const gui = new GUI();
163
 
164
- const folderSky = gui.addFolder( 'Sky' );
165
- folderSky.add( parameters, 'elevation', 0, 90, 0.1 ).onChange( updateSun );
166
- folderSky.add( parameters, 'azimuth', - 180, 180, 0.1 ).onChange( updateSun );
167
- folderSky.open();
168
 
169
- const waterUniforms = water.material.uniforms;
170
 
171
- const folderWater = gui.addFolder( 'Water' );
172
- folderWater.add( waterUniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
173
- folderWater.add( waterUniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
174
- folderWater.open();
175
 
176
- //
177
 
178
- window.addEventListener( 'resize', onWindowResize );
179
 
180
- }
 
181
 
182
- function onWindowResize() {
183
 
184
- camera.aspect = window.innerWidth / window.innerHeight;
185
- camera.updateProjectionMatrix();
186
 
187
- renderer.setSize( window.innerWidth, window.innerHeight );
188
 
189
- }
 
 
190
 
191
- function animate() {
192
 
193
- requestAnimationFrame( animate );
194
- render();
195
- stats.update();
196
 
197
- }
198
 
199
- function render() {
 
 
200
 
201
- const time = performance.now() * 0.001;
202
 
203
- mesh.position.y = Math.sin( time ) * 20 + 5;
204
- mesh.rotation.x = time * 0.5;
205
- mesh.rotation.z = time * 0.51;
206
 
207
- water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
208
 
209
- renderer.render( scene, camera );
210
-
211
- }
212
-
213
- </script>
214
- </body>
215
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <title>three.js webgl - shaders - ocean</title>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7
+ <!-- No local CSS file is referenced; ensure any needed styles are directly embedded or hosted -->
8
+ </head>
9
+ <body>
10
 
11
+ <div id="container"></div>
12
+ <div id="info">
13
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl ocean
14
+ </div>
15
 
16
+ <script type="module">
 
 
 
 
 
 
 
17
 
18
+ import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
19
 
20
+ import Stats from 'https://mrdoob.github.io/stats.js/build/stats.module.js';
21
 
22
+ import { GUI } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/lil-gui.module.min.js';
23
+ import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
24
+ import { Water } from 'https://threejs.org/examples/jsm/objects/Water.js';
25
+ import { Sky } from 'https://threejs.org/examples/jsm/objects/Sky.js';
26
 
27
+ let container, stats;
28
+ let camera, scene, renderer;
29
+ let controls, water, sun, mesh;
 
30
 
31
+ init();
32
+ animate();
 
33
 
34
+ function init() {
 
35
 
36
+ container = document.getElementById( 'container' );
37
 
38
+ //
39
 
40
+ renderer = new THREE.WebGLRenderer();
41
+ renderer.setPixelRatio( window.devicePixelRatio );
42
+ renderer.setSize( window.innerWidth, window.innerHeight );
43
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
44
+ renderer.toneMappingExposure = 0.5;
45
+ container.appendChild( renderer.domElement );
46
 
47
+ //
 
 
 
 
 
48
 
49
+ scene = new THREE.Scene();
50
 
51
+ camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
52
+ camera.position.set( 30, 30, 100 );
53
 
54
+ //
 
55
 
56
+ sun = new THREE.Vector3();
57
 
58
+ // Water
59
 
60
+ const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );
61
 
62
+ water = new Water(
63
+ waterGeometry,
64
+ {
65
+ textureWidth: 512,
66
+ textureHeight: 512,
67
+ waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function ( texture ) {
68
 
69
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
 
 
 
 
70
 
71
+ }),
72
+ sunDirection: new THREE.Vector3(),
73
+ sunColor: 0xffffff,
74
+ waterColor: 0x001e0f,
75
+ distortionScale: 3.7,
76
+ fog: scene.fog !== undefined
77
+ }
78
+ );
79
 
80
+ water.rotation.x = - Math.PI / 2;
 
 
 
 
 
 
 
81
 
82
+ scene.add( water );
83
 
84
+ // Skybox
85
 
86
+ const sky = new Sky();
87
+ sky.scale.setScalar( 10000 );
88
+ scene.add( sky );
89
 
90
+ const skyUniforms = sky.material.uniforms;
 
 
91
 
92
+ skyUniforms[ 'turbidity' ].value = 10;
93
+ skyUniforms[ 'rayleigh' ].value = 2;
94
+ skyUniforms[ 'mieCoefficient' ].value = 0.005;
95
+ skyUniforms[ 'mieDirectionalG' ].value = 0.8;
96
 
97
+ const parameters = {
98
+ elevation: 2,
99
+ azimuth: 180
100
+ };
101
 
102
+ const pmremGenerator = new THREE.PMREMGenerator( renderer );
103
+ const sceneEnv = new THREE.Scene();
 
 
104
 
105
+ let renderTarget;
 
106
 
107
+ function updateSun() {
108
 
109
+ const phi = THREE.MathUtils.degToRad( 90 - parameters.elevation );
110
+ const theta = THREE.MathUtils.degToRad( parameters.azimuth );
111
 
112
+ sun.setFromSphericalCoords( 1, phi, theta );
 
113
 
114
+ sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
115
+ water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();
116
 
117
+ if ( renderTarget !== undefined ) renderTarget.dispose();
 
118
 
119
+ sceneEnv.add( sky );
120
+ renderTarget = pmremGenerator.fromScene( sceneEnv );
121
+ scene.environment = renderTarget.texture;
122
 
123
+ }
 
 
124
 
125
+ updateSun();
126
 
127
+ //
128
 
129
+ const geometry = new THREE.BoxGeometry( 30, 30, 30 );
130
+ const material = new THREE.MeshStandardMaterial( { roughness: 0 } );
131
 
132
+ mesh = new THREE.Mesh( geometry, material );
133
+ scene.add( mesh );
134
 
135
+ //
 
136
 
137
+ controls = new OrbitControls( camera, renderer.domElement );
138
+ controls.maxPolarAngle = Math.PI * 0.495;
139
+ controls.target.set( 0, 10, 0 );
140
+ controls.minDistance = 40.0;
141
+ controls.maxDistance = 200.0;
142
+ controls.update();
143
 
144
+ //
145
 
146
+ stats = new Stats();
147
+ container.appendChild( stats.dom );
 
 
 
 
148
 
149
+ // GUI
150
 
151
+ const gui = new GUI();
 
152
 
153
+ const folderSky = gui.addFolder( 'Sky' );
154
+ folderSky.add( parameters, 'elevation', 0, 90, 0.1 ).onChange( updateSun );
155
+ folderSky.add( parameters, 'azimuth', - 180, 180, 0.1 ).onChange( updateSun );
156
+ folderSky.open();
157
 
158
+ const waterUniforms = water.material.uniforms;
159
 
160
+ const folderWater = gui.addFolder( 'Water' );
161
+ folderWater.add( waterUniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
162
+ folderWater.add( waterUniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
163
+ folderWater.open();
164
 
165
+ //
166
 
167
+ window.addEventListener( 'resize', onWindowResize );
 
 
 
168
 
169
+ }
170
 
171
+ function onWindowResize() {
172
 
173
+ camera.aspect = window.innerWidth / window.innerHeight;
174
+ camera.updateProjectionMatrix();
175
 
176
+ renderer.setSize( window.innerWidth, window.innerHeight );
177
 
178
+ }
 
179
 
180
+ function animate() {
181
 
182
+ requestAnimationFrame( animate );
183
+ render();
184
+ stats.update();
185
 
186
+ }
187
 
188
+ function render() {
 
 
189
 
190
+ const time = performance.now() * 0.001;
191
 
192
+ mesh.position.y = Math.sin( time ) * 20 + 5;
193
+ mesh.rotation.x = time * 0.5;
194
+ mesh.rotation.z = time * 0.51;
195
 
196
+ water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
197
 
198
+ renderer.render( scene, camera );
 
 
199
 
200
+ }
201
 
202
+ </script>
203
+ </body>
204
+ </html>