Hugging Face's logo

Spaces:
awacke1
/
DragDropThreeJS
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +83 -200
index.html CHANGED
@@ -1,204 +1,87 @@
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/three@0.128.0/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>
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>3D Card Game with Interactive Drag and Drop</title>
6
+ <style>
7
+ body { margin: 0; }
8
+ canvas { display: block; }
9
+ </style>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <canvas id="gameCanvas"></canvas>
14
+
15
+ <script>
16
+ var scene = new THREE.Scene();
17
+ var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
18
+ camera.position.set(0, 20, 50);
19
+ var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
20
+ renderer.setSize(window.innerWidth, window.innerHeight);
21
+ // Lighting
22
+ var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
23
+ scene.add(ambientLight);
24
+ var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
25
+ directionalLight.position.set(0, 1, 1);
26
+ scene.add(directionalLight);
27
+ // Table
28
+ var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
29
+ var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
30
+ var table = new THREE.Mesh(tableGeometry, tableMaterial);
31
+ table.position.set(0, -0.5, 0);
32
+ scene.add(table);
33
+ // Cards
34
+ var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
35
+ var cards = [];
36
+ // Generate and place cards
37
+ for (let i = 0; i < 52; i++) {
38
+ var cardMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
39
+ var card = new THREE.Mesh(cardGeometry, cardMaterial);
40
+ card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
41
+ scene.add(card);
42
+ cards.push(card);
43
+ }
44
+ var raycaster = new THREE.Raycaster();
45
+ var mouse = new THREE.Vector2();
46
+ var selectedCard = null;
47
+ var offset = new THREE.Vector3();
48
+ function onMouseMove(event) {
49
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
50
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
51
+ if (selectedCard) {
52
+ raycaster.setFromCamera(mouse, camera);
53
+ var intersects = raycaster.intersectObject(table, true);
54
+ if (intersects.length > 0) {
55
+ var intersect = intersects[0];
56
+ selectedCard.position.copy(intersect.point.add(offset));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  }
59
+ }
60
+ function onMouseDown(event) {
61
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
62
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
63
+ raycaster.setFromCamera(mouse, camera);
64
+ var intersects = raycaster.intersectObjects(cards, true);
65
+ if (intersects.length > 0) {
66
+ selectedCard = intersects[0].object;
67
+ var intersects = raycaster.intersectObject(table, true);
68
+ if (intersects.length > 0) {
69
+ var intersect = intersects[0];
70
+ offset.subVectors(selectedCard.position, intersect.point);
71
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  }
73
+ }
74
+ function onMouseUp(event) {
75
+ selectedCard = null;
76
+ }
77
+ window.addEventListener('mousemove', onMouseMove, false);
78
+ window.addEventListener('mousedown', onMouseDown, false);
79
+ window.addEventListener('mouseup', onMouseUp, false);
80
+ function animate() {
81
+ requestAnimationFrame(animate);
82
+ renderer.render(scene, camera);
83
+ }
84
+ animate();
85
+ </script>
86
+ </body>
87
+ </html>