Spaces:
Running
Running
File size: 3,909 Bytes
633b9f9 eafcff0 633b9f9 eafcff0 633b9f9 eafcff0 633b9f9 eafcff0 633b9f9 |
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 |
<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>
|