We wanted to learn how to use three.js, and decided that building our own voxel sandbox would be cool. From there, it seemed like a cool idea to make customizable plants via scripting, so we changed the project to focus entirely on plants and garderning.
What it does
Gardencraft presents the user with a blank canvas. The user can create new "flower pots," and select from a variety of "seeds" to plant. If the user is not satisfied with how a plant grew, it can be removed easily without disturbing nearby plants. Seed growth patterns and colors are fully scriptable.
- Left-click and drag to rotate camera
- Right-click and drag to pan camera
- Press N to create a new flower pot
- Left-click a spinning flower pot to go into Planting Mode
- In Planting Mode, select a seed from the palette in the top-left and left-click to plant it in a flower pot
- In Planting Mode, middle-click a flower to delete it
- Press B or middle-click a spinning flower pot to delete it
- Press Space to reset the camera
How we built it
We build our own three-dimensional object to keep track of a bounded grid of colors, then tracked changes to add and remove .js objects as needed. as well as a functional programming based approach to . We used THREE.Raycaster.intersectObjects about a billion times.
Challenges we ran into
We spent four grueling hours mainly trying to track down why flower pots became effectively immutable (erroring when you tried to delete something) once you created a new one. Turned out our "sorted" list post-raycast was obtained by concatenating the sorted raycasts of each flower pot, with the most recent one first. Obviously, this broke trying to edit anything older than the most recent flower pot.
Accomplishments that we're proud of
- Scripting capability
- Super cool-looking
- Totally web scale
- Not sleeping
What we learned
- you never know how much you love strong typing until you don't have it
- "three" totally doesn't look like a real word any more
What's next for Gardencraft
We'd like to improve the scripting capability and put it on a real website somewhere.