AI + Three.js: Building a Physics Playground with Compound Colliders

Try the interactive demo: https://vorodis2.com/_pyramid/

Build a pyramid, knock it down, drag objects, and explore the collision shapes.

Source code: https://github.com/vorodis2/pyramid

A simple idea that grew

I started with a simple task: build a pyramid of boxes and hit it with a ball.

After more than 10 years of developing interactive 3D applications, I wanted to explore how AI could change my workflow. Piramidka became my testing ground: a browser physics playground built with Three.js and OimoPhysics.

From instructions to interactive controls

I used an AI assistant in my editor to help implement buttons, sliders, and scene settings.

I described the behavior I wanted, tried the result, and refined the task. This made it easier to experiment with the interface while keeping my attention on the 3D scene and physics.

The most interesting part: compound colliders

A detailed visual mesh is not always a practical collision shape.

For imported models, the project supports approximating the geometry with multiple convex parts attached to a single rigid body. The green wireframes in the video show these collision shapes.

The AI assistant helped implement the geometry splitting. A similar task had previously taken me a couple of days.

This is still an approximation, not an exact triangle-mesh collider. It needs to be checked against the model and the intended interaction.

Some experiments stayed out of the project

I also tried Hunyuan 3D to generate scenery and chess pieces. The results did not fit what I needed, so I decided against using them.

A different approach worked better for the characters: generate a concept image using simple shapes, then recreate it in code with spheres, cylinders, and boxes.

That is how the spider and ChatGPT-logo-inspired character became part of the scene.

What changed in my work

I spend more time describing tasks aloud: what should happen, which constraints matter, and how I will check the result.

But understanding the architecture has become even more important.

Once I lose track of where the code belongs and how the parts connect, defining the next task becomes difficult. Generating more code does not solve that problem.

My experience helps me choose an approach, keep responsibilities clear, and evaluate what the AI produces.

Try it and share your feedback

Piramidka is still a work in progress. I'd appreciate feedback on the interaction, collision approximations, and performance on your device.

🎮 Live demo: https://vorodis2.com/_pyramid/

💻 Source: https://github.com/vorodis2/pyramid

I'm open to remote roles and project collaborations involving Three.js / WebGL, interactive configurators, physics, and simulations.

Portfolio & contact: https://vorodis2.com/

AI disclosure: I used AI tools during development and to help draft and translate this article. The experience and observations described here are my own.