Gardencraft

Inspiration

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.

Controls

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.