swirl draw

Here's how you can draw in 3D using three.js.

I didn't find the three.js documentation to be all that intuitive, but after finding some code examples and modifying them, it came together pretty quickly.

I set up a React app with the shapes I was able to make, where each page is its own React component. I then just tweaked each component from page to page, to make a variety of shapes.

The code for the React app is linked below.

three.js repo

You can see a few shapes I made with three.js in the image below.

swirl draw

Other examples in the repo include a 3d pyramid shape, cones, a torus, and a pretzel shape.

You can run the app as a regular React app; if you're using yarn, as I do, install the dependencies, then run 'yarn start'.

This app has a quirk, that sometimes the new page shape doesn't load until you press refresh; for my purposes, drawing shapes for myself, that didn't matter, but you may want to fix it.

After a while you can learn to 'think' in threejs. It's not that hard.

Basically, you have the camera, which is one thing you have to consider; you have the Cartesian grid your shapes lie on, which is another; and you have the materials your shapes are made of, and their colors, the final consideration.

Each page is just another iteration on those recombined items.

At the time I was making these pages, I thought I might be able to use three.js to rapidly create programmatic shapes, procedurally.

That may be possible, but it's not the cakewalk I thought it would be, so it's not implemented here.

What you see in the repo is a series of shapes, basically trying out the different options three.js makes available to you, in basic form.

Feel free to copy, modify and remix as you see fit.

And happy coding!