Hugging Face's logo

Spaces:
awacke1
/
HTML5-ThreeJS
Running

App Files Community
2
awacke1 commited on
Commit
5a675a1
•
1 Parent(s): 6ece7de

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +15 -40
index.html CHANGED
@@ -8,10 +8,11 @@
8
  canvas { display: block; }
9
  </style>
10
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
11
- <script>
12
- // AsyncTextureLoader definition here (if not imported as a module)
13
- // Assuming AsyncTextureLoader is defined above or imported
14
 
 
15
  var scene = new THREE.Scene();
16
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
17
  camera.position.set(0, 20, 50);
@@ -29,39 +30,17 @@
29
  var table = new THREE.Mesh(tableGeometry, tableMaterial);
30
  table.position.set(0, -0.5, 0);
31
  scene.add(table);
32
-
33
- // Async Texture Loading
34
- const asyncTextureLoader = new AsyncTextureLoader();
35
- const textures = [];
36
- const imageUrls = [
37
- 'the_hidden_city_known_as_civilization1.png',
38
- 'the_hidden_city_known_as_civilization2.png',
39
- 'the_hidden_city_known_as_civilization3.png',
40
- 'the_hidden_city_known_as_civilization4.png',
41
- ];
42
-
43
- //Promise.all(imageUrls.map(url => asyncTextureLoader.load(url)))
44
- // .then(loadedTextures => {
45
- // textures.push(...loadedTextures);
46
- // Once all textures are loaded, create cards
47
- createCards();
48
- // })
49
- // .catch(error => console.error('Error loading textures:', error));
50
-
51
- function createCards() {
52
- var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
53
- var cards = [];
54
- // Generate and place cards
55
- for (let i = 0; i < 52; i++) {
56
- var texture = textures[i % 4]; // Cycle through the loaded textures
57
- var cardMaterial = new THREE.MeshLambertMaterial({ map: texture });
58
- var card = new THREE.Mesh(cardGeometry, cardMaterial);
59
- card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
60
- scene.add(card);
61
- cards.push(card);
62
- }
63
  }
64
-
65
  var raycaster = new THREE.Raycaster();
66
  var mouse = new THREE.Vector2();
67
  var selectedCard = null;
@@ -103,10 +82,6 @@
103
  renderer.render(scene, camera);
104
  }
105
  animate();
106
-
107
  </script>
108
- </head>
109
- <body>
110
- <canvas id="gameCanvas"></canvas>
111
  </body>
112
- </html>
 
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);
 
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;
 
82
  renderer.render(scene, camera);
83
  }
84
  animate();
 
85
  </script>
 
 
 
86
  </body>
87
+ </html>