3D websites seems like a game changer and right up my alley.

Maybe being subtle is better.

Threejs-journey.com is apparently “the best way to learn three.js”, a 71 hour video course by Bruno Simon for $95. The site is worth the visit for an overview and the inspiration alone.

Threejs.org is the main docs site and showcases award winning websites. I saw the devaslife youtuber’s website, craftz.dog, as one of the featured sites here. Here’s what ends up in the code there:

<canvas data-engine="three.js r148" width"800" height="800" style="display: block; weight: 640; height: 640; touch-action: none;"></canvas>

Some of these site have loading icons.

You can use the stock library on three.js, create 3D assets, (called models) yourself in Blender, a free and open source software. Or you can download models, from a site like sketchfab, (checkout this incredible guitar).

This is not d3.js, an animated data charting library. Greensock, GSAP, is a different animation library that has a lot of award winning sites.

How does React work with this? with Package React Three Fiber.

React Transition Group, React Spring, and Framer Motion are 2d animation libraries for react.

To understand three.js, you have to understand webGL, like openGL (videogames) for the browser. The processor can millions of triangles instantly. Uses the GPU to draw on the html canvas.

Used to make Google maps.

Blender is a 3d software to create complex 3d images. Don’t want to be limited to just basic shapes. Lots of formats. Can be hard to get good looking results, so you have to dive deep.

Bruno Simon interview was good. Check out his portfolio with the red car.

Knowing basic JavaScript is necessary and it would help to know mathematics.

Basic 3d theory. Rendering pipline. Triangles

Shading

Shaders are written in openGL.

Checkout spline.design, a “place to design an collaborate in 3d.” There is a waitlist for spline.design/ai that looks amazing.