Digital Cow is a low-poly interactive farm scene where a cow moves through a living daily loop driven by simulation state instead of fixed animation scripts. The project combines a real-time 3D scene, utility-style behavior selection, procedural audio, environmental effects, and a game-like overlay for direct interaction.
It is designed as a playable technical showcase:
- autonomous cow behaviors
- time-of-day and weather-driven atmosphere
- multiple camera modes
- player-triggered interaction loops
- simulation-first state architecture using Zustand vanilla store
|
The cow is driven by behavior state, needs, activities, and world conditions rather than a static animation timeline. |
Dynamic sky, fog, weather, creatures, particles, post-processing, and environmental props create a rich low-poly scene. |
Feed, pet, play, call, jump, drink, graze, milk, change breed, switch seasons, and inspect behavior in real time. |
- Cow needs: hunger, energy, happiness, thirst
- Behavior states: idle, walking, grazing, eating, running, sleeping, settling, drinking, jumping
- Utility-based activity selection
- Time progression with speed controls and pause
- Day count and world-state tracking
- Feed with hay, apple, or carrot
- Play, pet, call, jump, drink, graze, and milk actions
- Breed selection and age slider
- Season switching
- Butterfly and rain toggles
- Manual orbit camera
- Cinematic camera mode
- First-person mode
- Dynamic sky and fog
- Pond, barn, fences, trees, clouds, grass, decorations, and ambient creatures
- Debug overlay with live behavior scores
- Optional profiler mode
- Renderer and performance inspection hooks
- Firebase Hosting configuration included
| Area | What you can do |
|---|---|
| Bottom control panel | Feed, play, pet, call, jump, drink, graze, milk |
| Camera selector | Switch between manual, cinematic, and first-person views |
| Breed and age controls | Change visual breed profile and cow life stage |
| Season selector | Swap seasonal atmosphere |
| Time panel | Scrub time of day, change speed, pause or resume simulation |
| Debug overlay | Press ~ to inspect state, events, and behavior scoring |
| Cow mesh | Click the cow to pet it directly |
| Tool | Role |
|---|---|
| React 19 | App shell and UI composition |
| Three.js | Rendering foundation |
| @react-three/fiber | React renderer for Three.js |
| @react-three/drei | Camera helpers, loaders, scene utilities |
| @react-three/postprocessing | Bloom and vignette polish |
| Zustand | Central simulation store |
| TypeScript | Type-safe engine and UI code |
| Vite | Fast development and production builds |
| Firebase Hosting | Static app deployment |
digitalcow/
|-- public/
| `-- models/
|-- src/
| |-- audio/ # procedural Web Audio engine
| |-- engine/ # simulation state, behaviors, world logic
| |-- scene/ # React Three Fiber scene components
| `-- ui/ # overlay controls, status, debug, profiler
|-- firebase.json
|-- package.json
|-- vite.config.ts
`-- readme.md
- Node.js 20+
- npm
- Firebase CLI if you plan to deploy
npm installnpm run devnpm run buildnpm run previewnpm run lint| Command | Purpose |
|---|---|
npm run dev |
Start Vite development server |
npm run build |
Type-check and build the production bundle |
npm run preview |
Preview the built app locally |
npm run lint |
Run ESLint |
npm run bd |
Build and deploy to Firebase |
To publish the source to GitHub:
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-github-repo-url>
git push -u origin mainThis repo already includes Firebase Hosting configuration:
publicdirectory is set todist- SPA routing rewrites all routes to
index.html
Current deploy command:
npm run bdIf you are deploying under your own Firebase project:
- Install the Firebase CLI
- Run
firebase login - Update
.firebasercwith your Firebase project ID - Run
npm run bd
- The app is structured so the engine logic stays separate from rendering logic.
- The scene can fall back to procedural visuals where model assets are unavailable.
- The README is written for a GitHub audience, while the codebase itself is organized more like a simulation sandbox than a simple UI app.
If you want this GitHub repository to look even stronger, add these next:
- A screenshot or animated GIF near the top of the README
- A short demo link once Firebase Hosting is live
- A Releases section if you version milestones publicly
- A roadmap section for simulation features you plan to ship next
No license file is currently included in this repository. Add one before open distribution if you want to define reuse terms clearly.