initial commit

2025-10-29 08:32:35 +00:00 · 2025-10-29 08:32:35 +00:00 · 98974890c8
commit 98974890c8
2 changed files with 69 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="utf-8">
+
+<style>
+body { margin: 0; overflow: hidden; }
+</style>
+
+</head>
+
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script src="main.js"></script>
+</body>
+
--- a/main.js
+++ b/main.js
@ -0,0 +1,52 @@
+// TODO: orbit camera
+// TODO: meshes for puzzle pieces
+
+// Initialise scene
+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);
+
+// Set up lights
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+directionalLight.position.set(1, 3, 2);
+scene.add(directionalLight);
+scene.add(directionalLight.target);
+
+// Position the camera
+camera.position.z = 5;
+
+function makeCube(xCoord) {
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
+    const cube = new THREE.Mesh(geometry, material);
+    cube.position.set(xCoord, 0, 0);
+    scene.add(cube);
+
+    return cube;
+}
+
+let cubes = [];
+for (let i = 0; i < 3; i++) {
+    const cube = makeCube((i - 1)*2);
+    cubes.push(cube);
+}
+
+// Animation loop
+function animate() {
+    requestAnimationFrame(animate);
+
+    for (let i = 0; i < cubes.length; i++) {
+        const cube = cubes[i];
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.01;
+    }
+
+    renderer.render(scene, camera);
+}
+animate();
+