JavaScript Drawing with Three.js
What is Three.js
You can draw in 3D using the JavaScript library Three.js, without needing to know a lot of advanced math or algorithms.
Three.js is a libary and API used for 3d graphics in the browser (that's where the three comes from). The code is all open source and free to use.
I didn't find the three.js documentation to be all that intuitive, but after modifying online code examples, I got something working quickly, which I'll share here with you.
Structure of the App
The three.js code I wrote is used within a React app.
The React app shows the shapes I was able to make, where each page is its own React component. I tweaked each component from page to page, to make a variety of shapes.
You can see a few square shapes against a blue background created with three.js in the image below, also included in the repo.
Other examples in the repo include a 3d pyramid shape, cones, a torus, and a pretzel shape.
Download the Code
The code for the React app is on GitHub.
You are free to use and adapt any of the code I wrote under the MIT license.
Running the React App
You can run the app as a regular React app.
Install the dependencies and then run 'npm start' or 'yarn start', based on your choice of package manager.
This app has a quirk: the new page shape doesn't always load until you press refresh.
For my purposes, that was ok, but you may want to look into fixing it.
Thinking in Three.js
You can learn to 'think' in threejs. It's not that hard.
Basically, you have the camera.
You have the Cartesian grid your shapes lie on.
You have the materials your shapes are made of, and their colors.
Together, those are the most important considerations. You can draw advanced shapes by changing each of these items.
Each page in my app is just another iteration on those recombined items.
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.
At the time I was making these pages, I thought I might be able to use three.js to create programmatic shapes procedurally. That may be possible, but it's not implemented here.
What you do have here is code that works, that you can use in aReact app (or anywhere else) however you want.
Feel free to copy, modify and remix as you see fit.
And happy coding!