Spaces:
Running
Running
File size: 4,671 Bytes
1adf58c 5ae1570 1adf58c 5ae1570 6ece7de 5ae1570 6ece7de 5ae1570 a3228af facffbf 5ae1570 4fe69fa 1adf58c 4fe69fa 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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<!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);
}
}
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>
</head>
<body>
<canvas id="gameCanvas"></canvas>
</body>
</html>
|