Spaces:

awacke1
/

HTML5-ThreeJS

Running

App Files Files Community

awacke1 commited on Feb 16

Commit

633b9f9

•

1 Parent(s): 1adf58c

Update backup.html

Browse files

Files changed (1) hide show

backup.html +88 -47

backup.html CHANGED Viewed

@@ -1,51 +1,92 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Three.js Scene and Animation Example</title>
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      display: block;
-    }
-  </style>
-</head>
-<body>
-  <script src="https://threejs.org/build/three.min.js"></script>
-  <script>
-    // Set up the scene, camera, and renderer
-    const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    const renderer = new THREE.WebGLRenderer();
     renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
-    // Create a cube geometry and material
-    const geometry = new THREE.BoxGeometry();
-    const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
-    // Create a cube mesh and add it to the scene
-    const cube = new THREE.Mesh(geometry, material);
-    scene.add(cube);
-    // Set up animation loop
-    const animate = function () {
-      requestAnimationFrame(animate);
-      // Rotate the cube
-      cube.rotation.x += 0.01;
-      cube.rotation.y += 0.01;
-      renderer.render(scene, camera);
-    };
-    // Start the animation loop
     animate();
-    // Adjust camera position
-    camera.position.z = 5;
-  </script>
-</body>
-</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>