feat: tank geometry, glass, gravel & lighting (#1, #2)

src/main.ts

@@ -1,4 +1,6 @@
 import * as THREE from "three";
+import { createTank } from "./scene/Tank";
+import { setupLighting } from "./scene/Lighting";
 
 const canvas = document.querySelector<HTMLCanvasElement>("#aquarium");
 if (!canvas) {
@@ -13,29 +15,19 @@ renderer.setPixelRatio(window.devicePixelRatio);
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x0a0a0f);
 
-// Camera
+// Camera — frames the tank, positioned slightly above its center
 const camera = new THREE.PerspectiveCamera(
   50,
   window.innerWidth / window.innerHeight,
   0.1,
   100
 );
-camera.position.set(0, 0, 8);
-camera.lookAt(0, 0, 0);
+camera.position.set(0, 1.5, 6);
+camera.lookAt(0, 1.2, 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);
+// Scene content
+setupLighting(scene, renderer);
+createTank(scene);
 
 // Resize handling
 function resize(): void {