backup.html

<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);
    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);
    // Cards
    var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
    var cards = [];
    var textureLoader = new THREE.TextureLoader();
    var imageNames = [
        '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',
    ];

    // Generate and place cards
    for (let i = 0; i < 52; i++) {
        const imageName = imageNames[i % 4]; // Cycle through the image names
        const texture = textureLoader.load(imageName);
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set(4, 4);

        var materials = [
            new THREE.MeshLambertMaterial({ map: texture }), // top side
            new THREE.MeshLambertMaterial({ map: texture }), // bottom side
            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), // side materials
            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),
        ];
        var card = new THREE.Mesh(cardGeometry, materials);
        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>