Spaces:

awacke1
/

ThreeJS-3D

Running

App Files Files Community

awacke1 commited on Jun 4

Commit

d00e6d3

•

1 Parent(s): 2021b88

Update index.html

Browse files

Files changed (1) hide show

index.html +144 -0

index.html CHANGED Viewed

@@ -26,4 +26,148 @@
     <script src="index.js" type="module"></script>
 </body>
 </html>

     <script src="index.js" type="module"></script>
 </body>
+</html>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>3D Tic Tac Toe</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        body { margin: 0; }
+        canvas { width: 100%; height: 100%; }
+        #buttons { position: absolute; top: 10px; left: 10px; }
+        button { margin-right: 10px; }
+    </style>
+</head>
+<body>
+    <div id="buttons">
+        <button id="placeX">Place X</button>
+        <button id="placeO">Place O</button>
+    </div>
+    <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 the game board
+        const boardSize = 3;
+        const cellSize = 1;
+        const board = new THREE.Group();
+        scene.add(board);
+        for (let i = 0; i < boardSize; i++) {
+            for (let j = 0; j < boardSize; j++) {
+                const geometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize);
+                const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
+                const cell = new THREE.Mesh(geometry, material);
+                cell.position.set(i * cellSize, 0, j * cellSize);
+                board.add(cell);
+            }
+        }
+        // Create the confined cube
+        const cubeSize = 10;
+        const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
+        const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
+        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
+        scene.add(cube);
+        // Set up the camera position
+        camera.position.set(5, 5, 5);
+        camera.lookAt(board.position);
+        // Set up the raycaster and mouse events
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+        let selectedObject = null;
+        document.addEventListener('mousedown', onMouseDown, false);
+        document.addEventListener('mousemove', onMouseMove, false);
+        document.addEventListener('mouseup', onMouseUp, false);
+        function onMouseDown(event) {
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(scene.children, true);
+            if (intersects.length > 0) {
+                selectedObject = intersects[0].object;
+            }
+        }
+        function onMouseMove(event) {
+            if (selectedObject) {
+                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+                raycaster.setFromCamera(mouse, camera);
+                const intersects = raycaster.intersectObject(cube);
+                if (intersects.length > 0) {
+                    selectedObject.position.copy(intersects[0].point);
+                }
+            }
+        }
+        function onMouseUp() {
+            selectedObject = null;
+        }
+        // Set up the buttons for placing X and O
+        const placeXButton = document.getElementById('placeX');
+        const placeOButton = document.getElementById('placeO');
+        placeXButton.addEventListener('click', placeX, false);
+        placeOButton.addEventListener('click', placeO, false);
+        function placeX() {
+            const geometry = new THREE.BoxGeometry(cellSize * 0.8, cellSize * 0.8, cellSize * 0.8);
+            const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+            const xMark = new THREE.Mesh(geometry, material);
+            xMark.position.set(Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2);
+            scene.add(xMark);
+        }
+        function placeO() {
+            const geometry = new THREE.SphereGeometry(cellSize * 0.4);
+            const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
+            const oMark = new THREE.Mesh(geometry, material);
+            oMark.position.set(Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2);
+            scene.add(oMark);
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            // Move and bounce the objects within the confined cube
+            scene.children.forEach(object => {
+                if (object !== board && object !== cube) {
+                    object.position.x += (Math.random() - 0.5) * 0.1;
+                    object.position.y += (Math.random() - 0.5) * 0.1;
+                    object.position.z += (Math.random() - 0.5) * 0.1;
+                    if (object.position.x < -cubeSize / 2 || object.position.x > cubeSize / 2) {
+                        object.position.x = THREE.MathUtils.clamp(object.position.x, -cubeSize / 2, cubeSize / 2);
+                    }
+                    if (object.position.y < -cubeSize / 2 || object.position.y > cubeSize / 2) {
+                        object.position.y = THREE.MathUtils.clamp(object.position.y, -cubeSize / 2, cubeSize / 2);
+                    }
+                    if (object.position.z < -cubeSize / 2 || object.position.z > cubeSize / 2) {
+                        object.position.z = THREE.MathUtils.clamp(object.position.z, -cubeSize / 2, cubeSize / 2);
+                    }
+                }
+            });
+            renderer.render(scene, camera);
+        }
+        animate();
+    </script>
+</body>
 </html>