| title | date | tags | ||
|---|---|---|---|---|
Mesh Background |
2021-04-07 |
|
import Triangles1 from "./triangles1.js" import Point from "./point.js" import Points from "./points.js" import PointsMesh from "./PointsMesh.js"
I saw a cool website background once and I want to try and recreate it.
I could have sworn that I saw this background on the datadog homepage. It's no longer there and I can't find it in the waybackmachine. Oh well.
It kind of looked like the following image (source), but each point was undulating up and down.
I LOVE react-three-fiber for projects like this. It gives you all of the 3D power of three.js with the ease of use and performance benefits of react.
Step 1 was to create a triangle. I also added some controls (pan, rotate, zoom) and grid helper.
I also added a click handler to show off the power of R3F (click on the triangle).
This point follows a sinusoid. You can adjust the amplitude and frequency of the point using the sliders.
Nice, now we're getting somewhere.
Looking nice and wavy now.
I think that's where I'm going to leave it for now. I'd highly recommend checking out R3F!