feat: project scaffolding - Vite + TypeScript + Three.js (#4)

src/main.ts

@@ -0,0 +1,57 @@
+import * as THREE from "three";
+
+const canvas = document.querySelector<HTMLCanvasElement>("#aquarium");
+if (!canvas) {
+  throw new Error('Canvas element with id "aquarium" not found');
+}
+
+// Renderer
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+renderer.setPixelRatio(window.devicePixelRatio);
+
+// Scene
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x0a0a0f);
+
+// Camera
+const camera = new THREE.PerspectiveCamera(
+  50,
+  window.innerWidth / window.innerHeight,
+  0.1,
+  100
+);
+camera.position.set(0, 0, 8);
+camera.lookAt(0, 0, 0);
+
+// Placeholder: small blue-green box at the origin
+const placeholder = new THREE.Mesh(
+  new THREE.BoxGeometry(1, 1, 1),
+  new THREE.MeshBasicMaterial({ color: 0x00ffaa })
+);
+scene.add(placeholder);
+
+// Lights (so we can use standard materials later)
+const ambient = new THREE.AmbientLight(0xffffff, 0.6);
+scene.add(ambient);
+const directional = new THREE.DirectionalLight(0xffffff, 1);
+directional.position.set(5, 10, 7);
+scene.add(directional);
+
+// Resize handling
+function resize(): void {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+}
+resize();
+window.addEventListener("resize", resize);
+
+// Render loop
+function animate(): void {
+  requestAnimationFrame(animate);
+  renderer.render(scene, camera);
+}
+animate();