Spaces:
Running
Running
File size: 3,078 Bytes
1adf58c 5ae1570 1adf58c 5ae1570 a3228af facffbf 5ae1570 1adf58c 5ae1570 1adf58c 5ae1570 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html>
<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>
|