<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transformers.js - Object Detection</title>
</head>
<body>
<h1>Object Detection w/ 🤗 Transformers.js</h1>
<label id="container" for="upload">
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#000"
d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
</path>
</svg>
Click to upload image
<label id="example">(or try example)</label>
</label>
<label id="status">Loading model...</label>
<input id="upload" type="file" accept="image/*" />
<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>