awacke1/HTML5-ThreeJS

1<script>2    var scene = new THREE.Scene();3    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);4    camera.position.set(0, 20, 50);5    var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });6    renderer.setSize(window.innerWidth, window.innerHeight);7    // Lighting8    var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light9    scene.add(ambientLight);10    var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);11    directionalLight.position.set(0, 1, 1);12    scene.add(directionalLight);13    // Table14    var tableGeometry = new THREE.BoxGeometry(100, 1, 100);15    var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });16    var table = new THREE.Mesh(tableGeometry, tableMaterial);17    table.position.set(0, -0.5, 0);18    scene.add(table);19    // Cards20    var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);21    var cards = [];22    var textureLoader = new THREE.TextureLoader();23    var imageNames = [24        'the_hidden_city_known_as_civilization1.png',25        'the_hidden_city_known_as_civilization2.png',26        'the_hidden_city_known_as_civilization3.png',27        'the_hidden_city_known_as_civilization4.png',28    ];29 30    // Generate and place cards31    for (let i = 0; i < 52; i++) {32        const imageName = imageNames[i % 4]; // Cycle through the image names33        const texture = textureLoader.load(imageName);34        texture.wrapS = THREE.RepeatWrapping;35        texture.wrapT = THREE.RepeatWrapping;36        texture.repeat.set(4, 4);37 38        var materials = [39            new THREE.MeshLambertMaterial({ map: texture }), // top side40            new THREE.MeshLambertMaterial({ map: texture }), // bottom side41            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }), // side materials42            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),43            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),44            new THREE.MeshLambertMaterial({ color: 0xaaaaaa }),45        ];46        var card = new THREE.Mesh(cardGeometry, materials);47        card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);48        scene.add(card);49        cards.push(card);50    }51    var raycaster = new THREE.Raycaster();52    var mouse = new THREE.Vector2();53    var selectedCard = null;54    var offset = new THREE.Vector3();55    function onMouseMove(event) {56        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;57        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;58        if (selectedCard) {59            raycaster.setFromCamera(mouse, camera);60            var intersects = raycaster.intersectObject(table, true);61            if (intersects.length > 0) {62                var intersect = intersects[0];63                selectedCard.position.copy(intersect.point.add(offset));64            }65        }66    }67    function onMouseDown(event) {68        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;69        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;70        raycaster.setFromCamera(mouse, camera);71        var intersects = raycaster.intersectObjects(cards, true);72        if (intersects.length > 0) {73            selectedCard = intersects[0].object;74            var intersects = raycaster.intersectObject(table, true);75            if (intersects.length > 0) {76                var intersect = intersects[0];77                offset.subVectors(selectedCard.position, intersect.point);78            }79        }80    }81    function onMouseUp(event) {82        selectedCard = null;83    }84    window.addEventListener('mousemove', onMouseMove, false);85    window.addEventListener('mousedown', onMouseDown, false);86    window.addEventListener('mouseup', onMouseUp, false);87    function animate() {88        requestAnimationFrame(animate);89        renderer.render(scene, camera);90    }91    animate();92</script>93