OpenCode/Aquarium
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace procedural fish with GLB 3D models + tank decor

Browse Source 
- 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
This commit is contained in:
kamilkrzywda
2026-10-07 11:45:39 +00:00
parent 3bfef18767
commit 4893ee2f8c
21 changed files with 407 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main.ts
+33 -2
View File
@@ -2,7 +2,8 @@ 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 { createGLTFishSchool, type FishSpec } from "./scene/GLTFish";
import { createDecor, type DecorSpec } from "./scene/Decor";
import { createParallaxCamera } from "./scene/Camera";
const canvas = document.querySelector<HTMLCanvasElement>("#aquarium");
@@ -32,7 +33,37 @@ camera.lookAt(0, 1.2, 0);
setupLighting(scene, renderer);
createTank(scene);
const water = createWater(scene);
const fishSchool = createFishSchool(scene, 6);
// 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)