Hugging Face's logo

Spaces:
awacke1
/
HTML5-ThreeJS
Running

App Files Community
2
awacke1 commited on
Commit
a3228af
·
verified ·
1 Parent(s): e9e7024

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +81 -97
index.html CHANGED
@@ -1,102 +1,86 @@
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/three@0.132.2/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
-
20
- var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
21
- renderer.setSize(window.innerWidth, window.innerHeight);
22
-
23
- // Lighting
24
- var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
25
- scene.add(ambientLight);
26
- var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
27
- directionalLight.position.set(0, 1, 1);
28
- scene.add(directionalLight);
29
-
30
- // Table
31
- var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
32
- var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
33
- var table = new THREE.Mesh(tableGeometry, tableMaterial);
34
- table.position.set(0, -0.5, 0);
35
- scene.add(table);
36
-
37
- // Cards
38
- var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
39
- var cards = [];
40
-
41
- // Generate and place cards
42
- for (let i = 0; i < 52; i++) {
43
- var cardMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
44
- var card = new THREE.Mesh(cardGeometry, cardMaterial);
45
- card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
46
- scene.add(card);
47
- cards.push(card);
48
- }
49
-
50
- var raycaster = new THREE.Raycaster();
51
- var mouse = new THREE.Vector2();
52
- var selectedCard = null;
53
- var offset = new THREE.Vector3();
54
-
55
- function onMouseMove(event) {
56
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
57
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
58
-
59
- if (selectedCard) {
60
- raycaster.setFromCamera(mouse, camera);
61
- var intersects = raycaster.intersectObject(table, true);
62
- if (intersects.length > 0) {
63
- var intersect = intersects[0];
64
- selectedCard.position.copy(intersect.point.add(offset));
65
- }
66
- }
67
- }
68
-
69
- function onMouseDown(event) {
70
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
71
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
72
-
73
  raycaster.setFromCamera(mouse, camera);
74
- var intersects = raycaster.intersectObjects(cards, true);
75
  if (intersects.length > 0) {
76
- selectedCard = intersects[0].object;
77
-
78
- var intersects = raycaster.intersectObject(table, true);
79
- if (intersects.length > 0) {
80
- var intersect = intersects[0];
81
- offset.subVectors(selectedCard.position, intersect.point);
82
- }
83
  }
84
  }
85
-
86
- function onMouseUp(event) {
87
- selectedCard = null;
88
- }
89
-
90
- window.addEventListener('mousemove', onMouseMove, false);
91
- window.addEventListener('mousedown', onMouseDown, false);
92
- window.addEventListener('mouseup', onMouseUp, false);
93
-
94
- function animate() {
95
- requestAnimationFrame(animate);
96
- renderer.render(scene, camera);
 
97
  }
98
-
99
- animate();
100
- </script>
101
- </body>
102
- </html>
 
 
 
 
 
 
 
 
 
1
+ <script>
2
+ var scene = new THREE.Scene();
3
+ var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
4
+ camera.position.set(0, 20, 50);
5
+ var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
6
+ renderer.setSize(window.innerWidth, window.innerHeight);
7
+ // Lighting
8
+ var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
9
+ scene.add(ambientLight);
10
+ var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
11
+ directionalLight.position.set(0, 1, 1);
12
+ scene.add(directionalLight);
13
+ // Table
14
+ var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
15
+ var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
16
+ var table = new THREE.Mesh(tableGeometry, tableMaterial);
17
+ table.position.set(0, -0.5, 0);
18
+ scene.add(table);
19
+ // Cards
20
+ var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
21
+ var cards = [];
22
+ var textureLoader = new THREE.TextureLoader();
23
+ var textures = [
24
+ textureLoader.load('the_hidden_city_known_as_civilization1.png'),
25
+ textureLoader.load('the_hidden_city_known_as_civilization2.png'),
26
+ textureLoader.load('the_hidden_city_known_as_civilization3.png'),
27
+ textureLoader.load('the_hidden_city_known_as_civilization4.png'),
28
+ ];
29
+ // Generate and place cards
30
+ for (let i = 0; i < 52; i++) {
31
+ var texture = textures[i % 4]; // Cycle through the textures for each card
32
+ var materials = [
33
+ new THREE.MeshLambertMaterial({ map: texture }), // top side
34
+ new THREE.MeshLambertMaterial({ map: texture }), // bottom side
35
+ new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), // side materials
36
+ new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
37
+ new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
38
+ new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
39
+ ];
40
+ var card = new THREE.Mesh(cardGeometry, materials);
41
+ card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
42
+ scene.add(card);
43
+ cards.push(card);
44
+ }
45
+ var raycaster = new THREE.Raycaster();
46
+ var mouse = new THREE.Vector2();
47
+ var selectedCard = null;
48
+ var offset = new THREE.Vector3();
49
+ function onMouseMove(event) {
50
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
51
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
52
+ if (selectedCard) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  raycaster.setFromCamera(mouse, camera);
54
+ var intersects = raycaster.intersectObject(table, true);
55
  if (intersects.length > 0) {
56
+ var intersect = intersects[0];
57
+ selectedCard.position.copy(intersect.point.add(offset));
 
 
 
 
 
58
  }
59
  }
60
+ }
61
+ function onMouseDown(event) {
62
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
63
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
64
+ raycaster.setFromCamera(mouse, camera);
65
+ var intersects = raycaster.intersectObjects(cards, true);
66
+ if (intersects.length > 0) {
67
+ selectedCard = intersects[0].object;
68
+ var intersects = raycaster.intersectObject(table, true);
69
+ if (intersects.length > 0) {
70
+ var intersect = intersects[0];
71
+ offset.subVectors(selectedCard.position, intersect.point);
72
+ }
73
  }
74
+ }
75
+ function onMouseUp(event) {
76
+ selectedCard = null;
77
+ }
78
+ window.addEventListener('mousemove', onMouseMove, false);
79
+ window.addEventListener('mousedown', onMouseDown, false);
80
+ window.addEventListener('mouseup', onMouseUp, false);
81
+ function animate() {
82
+ requestAnimationFrame(animate);
83
+ renderer.render(scene, camera);
84
+ }
85
+ animate();
86
+ </script>