kamilkrzywda
4893ee2f8c
- 6 tropical fish (angelfish x2, goldfish x2, guppy x2) from maya's-aquarium-3d - 4 Quaternius cute fish (Fish1 x2, Fish2, Fish3) with swim animations - 2 plants + 3 rocks on the gravel floor - Wandering AI with frame-rate-independent smoothing - Quaternius fish rotated to match local +X forward axis - .gitignore: add .env
103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
import * as THREE from "three";
|
|
import { createTank } from "./scene/Tank";
|
|
import { createWater } from "./scene/Water";
|
|
import { setupLighting } from "./scene/Lighting";
|
|
import { createGLTFishSchool, type FishSpec } from "./scene/GLTFish";
|
|
import { createDecor, type DecorSpec } from "./scene/Decor";
|
|
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);
|
|
|
|
// Fish — GLB models with swim animations + wandering AI.
|
|
// Maya's tropical fish already face local +X (no orient fix). The Quaternius
|
|
// pack is built with its long axis on +Z (nose at +Z), so it is rotated +90°
|
|
// about Y to bring the nose onto +X.
|
|
const fishSpecs: FishSpec[] = [
|
|
// Tropical (maya's-aquarium-3d)
|
|
{ url: "models/angelfish.glb", targetLength: 0.55, speed: [0.25, 0.45] },
|
|
{ url: "models/angelfish.glb", targetLength: 0.5, speed: [0.25, 0.45] },
|
|
{ url: "models/goldfish.glb", targetLength: 0.45, speed: [0.35, 0.6] },
|
|
{ url: "models/goldfish.glb", targetLength: 0.4, speed: [0.35, 0.6] },
|
|
{ url: "models/guppy.glb", targetLength: 0.4, speed: [0.4, 0.7] },
|
|
{ url: "models/guppy.glb", targetLength: 0.35, speed: [0.4, 0.7] },
|
|
// Cute fish (Quaternius, CC0)
|
|
{ url: "models/quaternius/glb/Fish1.glb", targetLength: 0.5, speed: [0.4, 0.7], orient: { y: Math.PI / 2 } },
|
|
{ url: "models/quaternius/glb/Fish1.glb", targetLength: 0.45, speed: [0.4, 0.7], orient: { y: Math.PI / 2 } },
|
|
{ url: "models/quaternius/glb/Fish2.glb", targetLength: 0.6, speed: [0.3, 0.55], orient: { y: Math.PI / 2 } },
|
|
{ url: "models/quaternius/glb/Fish3.glb", targetLength: 0.55, speed: [0.35, 0.6], orient: { y: Math.PI / 2 } },
|
|
];
|
|
const fishSchool = createGLTFishSchool(scene, fishSpecs);
|
|
|
|
// Decor — static plants and rocks on the gravel floor (y ~ 0.05).
|
|
const decorSpecs: DecorSpec[] = [
|
|
{ url: "models/plant0.glb", x: -1.4, z: -0.9, targetSize: 1.4, rotationY: 0.4 },
|
|
{ url: "models/plant1.glb", x: 1.3, z: -0.8, targetSize: 1.1, rotationY: -0.3 },
|
|
{ url: "models/rock0.glb", x: -0.7, z: 0.7, targetSize: 1.0, rotationY: 0.2 },
|
|
{ url: "models/rock1.glb", x: 0.8, z: 0.8, targetSize: 1.1, rotationY: 1.1 },
|
|
{ url: "models/rock2.glb", x: 0.1, z: -1.1, targetSize: 1.3, rotationY: 0.0 },
|
|
];
|
|
createDecor(scene, decorSpecs);
|
|
|
|
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();
|