{"id":29416238,"url":"https://github.com/luketurnbull/threejs-castle","last_synced_at":"2026-03-10T05:31:45.300Z","repository":{"id":303955190,"uuid":"997652056","full_name":"luketurnbull/threejs-castle","owner":"luketurnbull","description":"An interactive 3D Castle scene made with Blender, ThreeJS and React","archived":false,"fork":false,"pushed_at":"2025-07-28T11:28:23.000Z","size":640501,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T13:22:47.688Z","etag":null,"topics":["blender","canvas","css","html","react","react-three-drei","react-three-fiber","tailwindcss","threejs","typescript","vite","webgl","zustand"],"latest_commit_sha":null,"homepage":"https://castle.lukes.studio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luketurnbull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-06T22:43:30.000Z","updated_at":"2025-07-28T11:28:27.000Z","dependencies_parsed_at":"2025-07-10T18:12:43.243Z","dependency_job_id":null,"html_url":"https://github.com/luketurnbull/threejs-castle","commit_stats":null,"previous_names":["luketurnbull/threejs-castle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/luketurnbull/threejs-castle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luketurnbull%2Fthreejs-castle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luketurnbull%2Fthreejs-castle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luketurnbull%2Fthreejs-castle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luketurnbull%2Fthreejs-castle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luketurnbull","download_url":"https://codeload.github.com/luketurnbull/threejs-castle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luketurnbull%2Fthreejs-castle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30326068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T05:25:20.737Z","status":"ssl_error","status_checked_at":"2026-03-10T05:25:17.430Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blender","canvas","css","html","react","react-three-drei","react-three-fiber","tailwindcss","threejs","typescript","vite","webgl","zustand"],"created_at":"2025-07-11T19:02:20.398Z","updated_at":"2026-03-10T05:31:45.267Z","avatar_url":"https://github.com/luketurnbull.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Castle on a Hill\n\nAn immersive 3D castle experience built with React, Three.js, and modern web technologies. Experience a living castle environment with dynamic day/night cycles, interactive elements, and atmospheric audio.\n\n## 🌟 Features\n\n### Visual Experience\n\n- **Dynamic Day/Night Cycle**: Seamless transitions between day and night with atmospheric lighting changes\n- **Real-time Fire Effects**: Authentic fire simulation with flickering flames and smoke\n- **Procedural Grass**: 150,000+ animated grass blades with wind effects\n- **Interactive Windows**: Glowing castle windows with realistic flame lighting\n- **Atmospheric Sky**: Dynamic sky system with moving clouds and stars\n- **Animated Flag**: Interactive flag with hover effects and day/night color transitions\n\n### Audio System\n\n- **Spatial Audio**: Distance-based volume attenuation for immersive sound\n- **Day/Night Audio**: Different ambient sounds for day and night modes\n- **Interactive Sound Effects**: Fire crackling, leaves rustling, and background ambience\n- **Audio Controls**: Toggle audio with animated SVG morphing\n\n### Performance Optimizations\n\n- **KTX2 Texture Compression**: Efficient texture loading with Basis Universal\n- **DRACO Geometry Compression**: Optimized mesh loading\n- **Instanced Rendering**: High-performance grass and object rendering\n- **Adaptive DPR**: Optimal rendering across different devices\n- **Progressive Loading**: Smooth loading experience with state management\n\n## 🛠️ Technology Stack\n\n- **Frontend**: React 19, TypeScript\n- **3D Graphics**: Three.js, React Three Fiber, @react-three/drei\n- **State Management**: Zustand\n- **Animations**: GSAP (GreenSock Animation Platform)\n- **Build Tool**: Vite\n- **Shaders**: Custom GLSL with vite-plugin-glsl\n- **Audio**: Web Audio API with spatial audio\n- **Asset Compression**: KTX2, DRACO, Basis Universal\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (v18 or higher)\n- pnpm (recommended) or npm\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd castle\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   pnpm install\n   # or\n   npm install\n   ```\n\n3. **Start the development server**\n\n   ```bash\n   pnpm dev\n   # or\n   npm run dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173` to experience the castle\n\n### Build for Production\n\n```bash\npnpm build\n# or\nnpm run build\n```\n\n### Preview Production Build\n\n```bash\npnpm preview\n# or\nnpm run preview\n```\n\n## 🎮 Controls\n\n- **Mouse/Touch**: Orbit camera around the castle\n- **Scroll**: Zoom in/out\n- **Audio Button**: Toggle sound effects and ambient audio\n- **Day/Night Toggle**: Switch between day and night modes\n- **Start Button**: Begin the interactive experience\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/           # React components\n│   ├── castle.tsx       # Main 3D scene container\n│   ├── experience.tsx   # Core 3D experience setup\n│   ├── scene.tsx        # Scene composition\n│   ├── hill.tsx         # Terrain and grass system\n│   ├── windows.tsx      # Castle windows with lighting\n│   ├── flag.tsx         # Interactive flag\n│   ├── smoke.tsx        # Fire and smoke effects\n│   ├── sky-settings.tsx # Atmospheric sky system\n│   ├── cloud-settings.tsx # Cloud animations\n│   ├── stars.tsx        # Night sky stars\n│   ├── control-panel.tsx # UI controls\n│   └── *-material/      # Custom shader materials\n├── store/               # Zustand state management\n├── constants/           # Asset and audio constants\n├── utils/               # Utility functions\n├── assets/              # Audio files\n└── shaders/             # GLSL shader utilities\n```\n\n## 🎨 Custom Shaders\n\nThe project features several custom GLSL shaders:\n\n- **Day/Night Material**: Smooth transitions between day and night textures\n- **Grass Material**: Animated grass with wind effects and day/night lighting\n- **Window Material**: Realistic flame lighting simulation\n- **Smoke Material**: Dynamic smoke-to-fire morphing\n- **Flag Material**: Interactive lighting and color transitions\n\n## 🔊 Audio System\n\nThe audio system provides:\n\n- Background ambient sounds for day and night\n- Spatial audio for fire effects based on camera distance\n- Interactive sound effects for grass and environment\n- Smooth audio transitions between day/night modes\n\n## 🎯 Performance Features\n\n- **Asset Optimization**: KTX2 and DRACO compression for fast loading\n- **Rendering Optimization**: Instanced rendering for large object counts\n- **Memory Management**: Efficient texture and geometry handling\n- **Responsive Design**: Adaptive rendering for different device capabilities\n\n## 🔧 Development\n\n### Available Scripts\n\n- `pnpm dev` - Start development server\n- `pnpm build` - Build for production\n- `pnpm preview` - Preview production build\n- `pnpm lint` - Run ESLint\n\n### Adding New Features\n\n1. **New 3D Components**: Add to `src/components/`\n2. **Custom Shaders**: Create new material folders in `src/components/`\n3. **State Management**: Extend the Zustand store in `src/store/`\n4. **Audio**: Add audio files to `src/assets/` and update constants\n\n## 📝 License\n\nThis project is created for educational and portfolio purposes.\n\n## 👨‍💻 Author\n\n**Luke Turnbull** - A ThreeJS Project\n\n---\n\n_Experience the magic of interactive 3D web development with this castle on a hill!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluketurnbull%2Fthreejs-castle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluketurnbull%2Fthreejs-castle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluketurnbull%2Fthreejs-castle/lists"}