Sculpting a Rabbit Out of 14 Spheres and Capsules
Since I decided to build the rabbit purely in code with no modeling tool, all I had to work with were primitives like spheres and capsules.
In components/game/Rabbit.tsx, I stacked up about fourteen of them to assemble a single rabbit.
I started with proportions: a 2-head-tall chibi build with the head as big as the body.
A realistic rabbit has a small head, but cuteness comes from a big one.
On top of that I added pink inner ears, blush, and eye highlights — those three were almost the entirety of what made it feel "alive." Take them away and it instantly looked like an inanimate object.
The problem was that the face once vanished from the screen entirely.
In the code I'd plugged in coordinates for the eyes, nose, and blush, but when it rendered the face was blank.
The cause: the coordinates were buried inside the head sphere.
The head sphere's radius is 0.3, but the distance to the eye center was 0.253, so the eyes were submerged below the sphere's surface and invisible.
{/* Head — radius 0.3 */}
<mesh material={fur}><sphereGeometry args={[0.3, 24, 18]} /></mesh>
{/* Eye — pull z back to -0.25 so it pokes slightly out of the head surface */}
<mesh ref={eyeL} position={[-0.115, 0.07, -0.25]} material={dark}>
<sphereGeometry args={[0.045, 12, 12]} />
</mesh>
The numbers looked plausible, so no matter how much I reread the code I couldn't see it.
It only got caught at the screenshot gate — a step where I capture the actual render at every stage and check it with my eyes.
Once I pushed the part coordinates out past the surface so they protruded, the face came back.
It was a fresh reminder that in 3D the numbers can be right while the screen is wrong.
Next time: putting movement onto this body.