Spaces:

awacke1
/

HTML5-ThreeJS

Running

App Files Files Community

awacke1 commited on Feb 16, 2024

Commit

f277c17

verified ·

1 Parent(s): f648111

Update index.html

Browse files

Files changed (1) hide show

index.html +49 -58

index.html CHANGED Viewed

@@ -2,13 +2,12 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>3D Card Game with Physics</title>
     <style>
         body { margin: 0; }
         canvas { display: block; }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
 </head>
 <body>
     <canvas id="gameCanvas"></canvas>
@@ -16,14 +15,11 @@
     <script>
         var scene = new THREE.Scene();
         var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        camera.position.set(0, 30, 100);
         var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
         renderer.setSize(window.innerWidth, window.innerHeight);
-        // Physics world setup
-        var world = new CANNON.World();
-        world.gravity.set(0, -9.82, 0); // Apply gravity in the negative y direction
         // Lighting
         var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
         scene.add(ambientLight);
@@ -31,77 +27,72 @@
         directionalLight.position.set(0, 1, 1);
         scene.add(directionalLight);
-        // Table surface with physics
         var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
-        var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); // Brown color for the table
         var table = new THREE.Mesh(tableGeometry, tableMaterial);
-        table.position.set(0, -0.5, 0); // Adjust position to align with the physics body
         scene.add(table);
-        // Create physics body for the table
-        var tableShape = new CANNON.Box(new CANNON.Vec3(50, 0.5, 50)); // Half extents match the Three.js geometry
-        var tableBody = new CANNON.Body({
-            mass: 0, // Mass of 0 makes the body static
-            position: new CANNON.Vec3(0, -0.5, 0), // Match the position of the Three.js mesh
-            shape: tableShape
-        });
-        world.addBody(tableBody);
-        // Card geometry and material
-        var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7); // Generic card size
         var cards = [];
-        var cardBodies = []; // For physics bodies
-        // Generate colors for cards
-        var colors = [];
         for (let i = 0; i < 52; i++) {
-            colors.push(Math.random() * 0xffffff); // Generate random color
         }
-        // Shuffle colors
-        function shuffleArray(array) {
-            for (let i = array.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [array[i], array[j]] = [array[j], array[i]]; // Swap
             }
         }
-        shuffleArray(colors); // Shuffle the colors array to simulate shuffling cards
-        // Card creation with physics and color based on shuffle
-        function addCard(x, y, z, colorIndex) {
-            var cardMaterial = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });
-            var card = new THREE.Mesh(cardGeometry, cardMaterial);
-            card.position.set(x, y, z);
-            scene.add(card);
-            cards.push(card);
-            // Physics for card
-            var cardShape = new CANNON.Box(new CANNON.Vec3(2.5, 0.05, 3.5));
-            var cardBody = new CANNON.Body({ mass: 0.1 });
-            cardBody.addShape(cardShape);
-            cardBody.position.set(x, y, z);
-            world.addBody(cardBody);
-            cardBodies.push(cardBody);
         }
-        // Create a stack of cards
-        for (let i = 0; i < 52; i++) {
-            addCard(0, i * 0.2 + 1, 0, i); // Position cards in a stack
         }
         function animate() {
             requestAnimationFrame(animate);
-            // Update physics world
-            world.step(1 / 60);
-            // Sync Three.js objects with physics objects
-            for (let i = 0; i < cardBodies.length; i++) {
-                cards[i].position.copy(cardBodies[i].position);
-                cards[i].quaternion.copy(cardBodies[i].quaternion);
-            }
             renderer.render(scene, camera);
         }

 <html>
 <head>
     <meta charset="UTF-8">
+    <title>3D Card Game with Interactive Drag and Drop</title>
     <style>
         body { margin: 0; }
         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);
         var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
         renderer.setSize(window.innerWidth, window.innerHeight);
         // Lighting
         var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
         scene.add(ambientLight);
         directionalLight.position.set(0, 1, 1);
         scene.add(directionalLight);
+        // Table
         var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
+        var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
         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);
         }