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

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aquarium</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        background: #0a0a0f;
+      }
+      canvas {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="aquarium"></canvas>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "aquarium",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "three": "^0.182.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.182.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.0"
+  }
+}

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();

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src/**/*"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    outDir: "dist"
+  }
+});