Goals:

• Figure out point clouds in r3f and nextjs
• Make sure that implementations for point clouds in vanilla threejs work in r3f
• Figure out / experiment with methodologies for shaping point clouds and manipulating their movements.

‍

Process:

---

I need to re-familiarize myself with the structure of React-three-fiber and how you create meshes in R3F. In vanilla you can render a point cloud by using THREE.Points in instead of THREE.Mesh. You don't need to touch the geometry or material at all, or rather, the material is generally speaking not important at all when working with points. It was a bit of a headache to understand the difference between pointsMaterial and PointsMaterial from drei and vanilla respectively.

I ended up having firing up a non r3f and non nextjs version to experiment with shape and geometries made of points before figuring out how to re-format and re-write for R3F. R3F is theoretically just a wrapper for declaratively writing Three.js anyways.

Based on the provided figma files designed by Cindy, I knew that I was working with some form of galaxy created by small points. In my head it makes a lot of sense to divide things into 2 different sections. Big planets and small point cloud rings, those are the two repeated motifs, the general silhouette of the navigation can be made from the same components used in the landing by changing their scale, number, and position.

‍

The most daunting task of the two was the smaller points, those would be the bulk of the animations. Since we wanted an organic galaxy feel to our points it made more sense to me to go full custom with a buffer geometry instead of a Torus geometry, or worse, a 3D model.

‍

I began exploring methods of creating / animating our buffer geometry points by writing a custom vertex shader and fragment shader. There's still a lot of work to be done in regards to making the animations feel nice and natural but this is a good start.

‍