Spaces:

awacke1
/

HTML5-ThreeJS

Running

App Files Files Community

awacke1 commited on Feb 16, 2024

Commit

5ae1570

verified ·

1 Parent(s): 633b9f9

Update index.html

Browse files

Files changed (1) hide show

index.html +40 -50

index.html CHANGED Viewed

@@ -8,11 +8,10 @@
         canvas { display: block; }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
-</head>
-<body>
-    <canvas id="gameCanvas"></canvas>
     <script>
         var scene = new THREE.Scene();
         var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         camera.position.set(0, 20, 50);
@@ -30,58 +29,49 @@
         var table = new THREE.Mesh(tableGeometry, tableMaterial);
         table.position.set(0, -0.5, 0);
         scene.add(table);
-        // Cards
-        var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
-        var cards = [];
-        // Generate and place cards
-        for (let i = 0; i < 52; i++) {
-            var cardMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
-            var card = new THREE.Mesh(cardGeometry, cardMaterial);
-            card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
-            scene.add(card);
-            cards.push(card);
-        }
-        var raycaster = new THREE.Raycaster();
-        var mouse = new THREE.Vector2();
-        var selectedCard = null;
-        var offset = new THREE.Vector3();
-        function onMouseMove(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-            if (selectedCard) {
-                raycaster.setFromCamera(mouse, camera);
-                var intersects = raycaster.intersectObject(table, true);
-                if (intersects.length > 0) {
-                    var intersect = intersects[0];
-                    selectedCard.position.copy(intersect.point.add(offset));
-                }
-            }
-        }
-        function onMouseDown(event) {
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-            raycaster.setFromCamera(mouse, camera);
-            var intersects = raycaster.intersectObjects(cards, true);
-            if (intersects.length > 0) {
-                selectedCard = intersects[0].object;
-                var intersects = raycaster.intersectObject(table, true);
-                if (intersects.length > 0) {
-                    var intersect = intersects[0];
-                    offset.subVectors(selectedCard.position, intersect.point);
-                }
             }
         }
-        function onMouseUp(event) {
-            selectedCard = null;
-        }
-        window.addEventListener('mousemove', onMouseMove, false);
-        window.addEventListener('mousedown', onMouseDown, false);
-        window.addEventListener('mouseup', onMouseUp, false);
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }
         animate();
     </script>
 </body>
-</html>

         canvas { display: block; }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
     <script>
+        // AsyncTextureLoader definition here (if not imported as a module)
+        // Assuming AsyncTextureLoader is defined above or imported
         var scene = new THREE.Scene();
         var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         camera.position.set(0, 20, 50);
         var table = new THREE.Mesh(tableGeometry, tableMaterial);
         table.position.set(0, -0.5, 0);
         scene.add(table);
+        // Async Texture Loading
+        const asyncTextureLoader = new AsyncTextureLoader();
+        const textures = [];
+        const imageUrls = [
+            'the_hidden_city_known_as_civilization1.png',
+            'the_hidden_city_known_as_civilization2.png',
+            'the_hidden_city_known_as_civilization3.png',
+            'the_hidden_city_known_as_civilization4.png',
+        ];
+        Promise.all(imageUrls.map(url => asyncTextureLoader.load(url)))
+            .then(loadedTextures => {
+                textures.push(...loadedTextures);
+                // Once all textures are loaded, create cards
+                createCards();
+            })
+            .catch(error => console.error('Error loading textures:', error));
+        function createCards() {
+            var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
+            var cards = [];
+            // Generate and place cards
+            for (let i = 0; i < 52; i++) {
+                var texture = textures[i % 4]; // Cycle through the loaded textures
+                var cardMaterial = new THREE.MeshLambertMaterial({ map: texture });
+                var card = new THREE.Mesh(cardGeometry, cardMaterial);
+                card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);
+                scene.add(card);
+                cards.push(card);
             }
         }
+        // Interaction code (onMouseMove, onMouseDown, onMouseUp) remains the same
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }
         animate();
     </script>
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
 </body>
+</html>