Hugging Face's logo

Spaces:
awacke1
/
ThreeJS-3D
Running

App Files Community
awacke1 commited on
Commit
d00e6d3
·
verified ·
1 Parent(s): 2021b88

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +144 -0
index.html CHANGED
@@ -26,4 +26,148 @@
26
  <script src="index.js" type="module"></script>
27
  </body>
28
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </html>
 
26
  <script src="index.js" type="module"></script>
27
  </body>
28
 
29
+ </html>
30
+
31
+
32
+ <!DOCTYPE html>
33
+ <html>
34
+ <head>
35
+ <title>3D Tic Tac Toe</title>
36
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
37
+ <style>
38
+ body { margin: 0; }
39
+ canvas { width: 100%; height: 100%; }
40
+ #buttons { position: absolute; top: 10px; left: 10px; }
41
+ button { margin-right: 10px; }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <div id="buttons">
46
+ <button id="placeX">Place X</button>
47
+ <button id="placeO">Place O</button>
48
+ </div>
49
+ <script>
50
+ // Set up the scene, camera, and renderer
51
+ const scene = new THREE.Scene();
52
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
53
+ const renderer = new THREE.WebGLRenderer();
54
+ renderer.setSize(window.innerWidth, window.innerHeight);
55
+ document.body.appendChild(renderer.domElement);
56
+
57
+ // Create the game board
58
+ const boardSize = 3;
59
+ const cellSize = 1;
60
+ const board = new THREE.Group();
61
+ scene.add(board);
62
+
63
+ for (let i = 0; i < boardSize; i++) {
64
+ for (let j = 0; j < boardSize; j++) {
65
+ const geometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize);
66
+ const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
67
+ const cell = new THREE.Mesh(geometry, material);
68
+ cell.position.set(i * cellSize, 0, j * cellSize);
69
+ board.add(cell);
70
+ }
71
+ }
72
+
73
+ // Create the confined cube
74
+ const cubeSize = 10;
75
+ const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
76
+ const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
77
+ const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
78
+ scene.add(cube);
79
+
80
+ // Set up the camera position
81
+ camera.position.set(5, 5, 5);
82
+ camera.lookAt(board.position);
83
+
84
+ // Set up the raycaster and mouse events
85
+ const raycaster = new THREE.Raycaster();
86
+ const mouse = new THREE.Vector2();
87
+ let selectedObject = null;
88
+
89
+ document.addEventListener('mousedown', onMouseDown, false);
90
+ document.addEventListener('mousemove', onMouseMove, false);
91
+ document.addEventListener('mouseup', onMouseUp, false);
92
+
93
+ function onMouseDown(event) {
94
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
95
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
96
+ raycaster.setFromCamera(mouse, camera);
97
+ const intersects = raycaster.intersectObjects(scene.children, true);
98
+
99
+ if (intersects.length > 0) {
100
+ selectedObject = intersects[0].object;
101
+ }
102
+ }
103
+
104
+ function onMouseMove(event) {
105
+ if (selectedObject) {
106
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
107
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
108
+ raycaster.setFromCamera(mouse, camera);
109
+ const intersects = raycaster.intersectObject(cube);
110
+
111
+ if (intersects.length > 0) {
112
+ selectedObject.position.copy(intersects[0].point);
113
+ }
114
+ }
115
+ }
116
+
117
+ function onMouseUp() {
118
+ selectedObject = null;
119
+ }
120
+
121
+ // Set up the buttons for placing X and O
122
+ const placeXButton = document.getElementById('placeX');
123
+ const placeOButton = document.getElementById('placeO');
124
+
125
+ placeXButton.addEventListener('click', placeX, false);
126
+ placeOButton.addEventListener('click', placeO, false);
127
+
128
+ function placeX() {
129
+ const geometry = new THREE.BoxGeometry(cellSize * 0.8, cellSize * 0.8, cellSize * 0.8);
130
+ const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
131
+ const xMark = new THREE.Mesh(geometry, material);
132
+ xMark.position.set(Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2);
133
+ scene.add(xMark);
134
+ }
135
+
136
+ function placeO() {
137
+ const geometry = new THREE.SphereGeometry(cellSize * 0.4);
138
+ const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
139
+ const oMark = new THREE.Mesh(geometry, material);
140
+ oMark.position.set(Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2);
141
+ scene.add(oMark);
142
+ }
143
+
144
+ // Animation loop
145
+ function animate() {
146
+ requestAnimationFrame(animate);
147
+
148
+ // Move and bounce the objects within the confined cube
149
+ scene.children.forEach(object => {
150
+ if (object !== board && object !== cube) {
151
+ object.position.x += (Math.random() - 0.5) * 0.1;
152
+ object.position.y += (Math.random() - 0.5) * 0.1;
153
+ object.position.z += (Math.random() - 0.5) * 0.1;
154
+
155
+ if (object.position.x < -cubeSize / 2 || object.position.x > cubeSize / 2) {
156
+ object.position.x = THREE.MathUtils.clamp(object.position.x, -cubeSize / 2, cubeSize / 2);
157
+ }
158
+ if (object.position.y < -cubeSize / 2 || object.position.y > cubeSize / 2) {
159
+ object.position.y = THREE.MathUtils.clamp(object.position.y, -cubeSize / 2, cubeSize / 2);
160
+ }
161
+ if (object.position.z < -cubeSize / 2 || object.position.z > cubeSize / 2) {
162
+ object.position.z = THREE.MathUtils.clamp(object.position.z, -cubeSize / 2, cubeSize / 2);
163
+ }
164
+ }
165
+ });
166
+
167
+ renderer.render(scene, camera);
168
+ }
169
+
170
+ animate();
171
+ </script>
172
+ </body>
173
  </html>