Spaces:
Running
Running
| <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> | |
| <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 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); | |
| var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); | |
| 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); | |
| // 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> | |