72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import * as THREE from "three";
|
|
import { createTank } from "./scene/Tank";
|
|
import { createWater } from "./scene/Water";
|
|
import { setupLighting } from "./scene/Lighting";
|
|
import { createFishSchool } from "./scene/Fish";
|
|
import { createParallaxCamera } from "./scene/Camera";
|
|
|
|
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 — 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, 1.5, 6);
|
|
camera.lookAt(0, 1.2, 0);
|
|
|
|
// Scene content
|
|
setupLighting(scene, renderer);
|
|
createTank(scene);
|
|
const water = createWater(scene);
|
|
const fishSchool = createFishSchool(scene, 6);
|
|
const parallax = createParallaxCamera(camera);
|
|
|
|
// Mouse tracking (normalized to -1..1)
|
|
let mouseX = 0, mouseY = 0;
|
|
window.addEventListener("mousemove", (e) => {
|
|
mouseX = (e.clientX / window.innerWidth) * 2 - 1;
|
|
mouseY = (e.clientY / window.innerHeight) * 2 - 1;
|
|
});
|
|
|
|
// 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
|
|
const startTime = performance.now();
|
|
let lastFrameTime = performance.now();
|
|
function animate(): void {
|
|
requestAnimationFrame(animate);
|
|
const now = performance.now();
|
|
const time = (now - startTime) / 1000;
|
|
const dt = Math.min((now - lastFrameTime) / 1000, 0.1);
|
|
lastFrameTime = now;
|
|
water.update(time);
|
|
fishSchool.update(dt, time);
|
|
parallax.update(mouseX, mouseY, time, dt);
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|