An experimental 3D browser environment bridging digital art and ecological awareness through interactive tree models. Built with React and Three.js.
Xylophobia-Dendrophylia is an immersive web experience that transforms photogrammetric scans of urban trees into an infinite virtual forest. Part of the Money Trees ecosystem (2024), this project enables:
- Interactive exploration of 3D tree models
- Real-world ecological data integration via Google's i-tree
- Mobile-responsive environment with game-like controls
The project serves as both an artistic installation and educational tool, encouraging users to reflect on environmental stewardship through a blend of digital/physical interactions.
This project is the result of a collaborative effort by Rachy Mcewan and Steve Zafeiriou.
- 3D Environment
Rendered with Three.js and React Three Fiber - Dynamic Models
Photogrammetric scans of London's urban trees - Real-Time Data
Ecological signals from physical tree counterparts - Mobile First
Optimized touch controls and responsive UI
| Component | Description |
|---|---|
| Joystick Controls | Dual virtual joysticks for movement |
| Model Selection | Community-voted tree model ranking |
| QR Code Access | Physical/digital tree linking |
| Info System | Educational popups with project docs |
Frontend
React 18 - Component architecture
Three.js/r3f - 3D rendering pipeline
Styled-Components - CSS-in-JS styling
React Icons - UI icons
React Router - Navigation system
Data
i-tree API - Ecological metrics
GLTF/GLB - 3D model format
Photogrammetry - Tree scanning technique
- Clone repository
git clone https://github.com/stevezafeiriou/xylophobia-dendrophylia.git
cd xylophobia-dendrophylia- Install dependencies
npm install- Start development server
npm start- Model Selection Choose from community-ranked tree models
- Movement Left joystick - Camera position Right joystick - Camera rotation
- Info Access Click (i) icon for project documentation
# Environment Variables
REACT_APP_ITREE_KEY=your_api_key
REACT_APP_MAP_ZOOM=1.5src/
├── components/ # React components
│ ├── Scene/ # Three.js environment
│ ├── Joystick/ # Control system
│ └── Popup/ # Info modal system
├── data/ # Model metadata
├── styles/ # Global styling
└── public/ # Static assets
└── models/ # GLTF/GLB files
- Fork the repository
- Create feature branch
git checkout -b feature/new-tree-model- Commit changes
git commit -m 'Add: New oak tree model'- Push to branch
git push origin feature/new-tree-model- Open pull request
- Fix the joystick controls (the camera movement is currently inverted).
MIT License - See LICENSE for details