awacke1/HTML5-ThreeJS
1
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <title>3D Card Game with Interactive Drag and Drop</title>6 <style>7 body { margin: 0; }8 canvas { display: block; }9 </style>10 <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>11</head>12<body>13 <canvas id="gameCanvas"></canvas>14 15 <script>16 var scene = new THREE.Scene();17 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);18 camera.position.set(0, 20, 50);19 var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });20 renderer.setSize(window.innerWidth, window.innerHeight);21 // Lighting22 var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light23 scene.add(ambientLight);24 var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);25 directionalLight.position.set(0, 1, 1);26 scene.add(directionalLight);27 // Table28 var tableGeometry = new THREE.BoxGeometry(100, 1, 100);29 var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });30 var table = new THREE.Mesh(tableGeometry, tableMaterial);31 table.position.set(0, -0.5, 0);32 scene.add(table);33 // Cards34 var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);35 var cards = [];36 // Generate and place cards37 for (let i = 0; i < 52; i++) {38 var cardMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });39 var card = new THREE.Mesh(cardGeometry, cardMaterial);40 card.position.set(Math.random() * 10 - 5, 0.1 * i, Math.random() * 10 - 5);41 scene.add(card);42 cards.push(card);43 }44 var raycaster = new THREE.Raycaster();45 var mouse = new THREE.Vector2();46 var selectedCard = null;47 var offset = new THREE.Vector3();48 function onMouseMove(event) {49 mouse.x = (event.clientX / window.innerWidth) * 2 - 1;50 mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;51 if (selectedCard) {52 raycaster.setFromCamera(mouse, camera);53 var intersects = raycaster.intersectObject(table, true);54 if (intersects.length > 0) {55 var intersect = intersects[0];56 selectedCard.position.copy(intersect.point.add(offset));57 }58 }59 }60 function onMouseDown(event) {61 mouse.x = (event.clientX / window.innerWidth) * 2 - 1;62 mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;63 raycaster.setFromCamera(mouse, camera);64 var intersects = raycaster.intersectObjects(cards, true);65 if (intersects.length > 0) {66 selectedCard = intersects[0].object;67 var intersects = raycaster.intersectObject(table, true);68 if (intersects.length > 0) {69 var intersect = intersects[0];70 offset.subVectors(selectedCard.position, intersect.point);71 }72 }73 }74 function onMouseUp(event) {75 selectedCard = null;76 }77 window.addEventListener('mousemove', onMouseMove, false);78 window.addEventListener('mousedown', onMouseDown, false);79 window.addEventListener('mouseup', onMouseUp, false);80 function animate() {81 requestAnimationFrame(animate);82 renderer.render(scene, camera);83 }84 animate();85 </script>86</body>87</html>