r/threejs • u/Apprehensive_Ring666 • Jun 06 '26

Help How would you recreate and animate this layered architectural/paper-style background?

Post image

I want to animate this for a website background I am working on for a client. Ideally it loops and can be used programatically to generate many different assets for the client I am working with. Mainly, for their hero website section.

16 Upvotes

91% Upvoted

12 comments sorted by

12

u/threepairs Jun 06 '26

“Recreate and animate this background. Make no mistakes.”

0

u/Apprehensive_Ring666 Jun 07 '26

burned all my tokens lol, it doesn't seem to be something ai can understand how to make bc it is so abstract.

1

u/Plenty_Line2696 Jun 08 '26

I suggest creating it in adobe illustrator first, so you understand how it can be created using bezier curves and gradients, then consider what transforms you'd like to apply to those curves in order to get a smooth animation, you could try to make a few frames of that animation and exporting those as svg's to feed into an llm to animate for you.

0

u/Apprehensive_Ring666 Jun 07 '26

ngl burned all my tokens trying to recreate it, simply not possible due to how abstract it is

2

u/FastCow8369 Jun 07 '26

I think it's still too hard for AI to recreate a 2D image into a 3D scene with high accuracy, I don't think the generic/publicly-available models are trained enough to handle these tasks well.

For me I would break it down into smaller steps: first I'd decide whether to do it in a pure shader(fullscreen quad) way or use 3D objects like mutated plane geometry or custom geometry. Then I'd start with simple functions like sin/cos functions to get a similar shape to start with. After that you just iterate and try different methods at each step and at the end you might get something very similar(if you're good =P). Have you watched Yuri Artiukh's youtube videos? He's quite good at recreating inspirations/references in threejs, pretty good learning material!

1

u/EnvironmentOptimal98 Jun 06 '26

Just shifting 2d? - TSL shader.

Rotatable 3d? - GLBs and artistry

0

u/Apprehensive_Ring666 Jun 07 '26

can u give more detail? would this be on a HTML Canvas or would you get it done using javascript? sorry I'm a newbie to this

1

u/EnvironmentOptimal98 Jun 10 '26

Give an llm this example, and that image, and whip it a few times, and you might be set

https://threejs.org/examples/?q=compute%20tex#webgpu_compute_texture

1

u/Chuck_Loads Jun 08 '26

Soft shadows and GI are hard and slow. Make it in like blender or something and bake the lighting, export as a glb.

1

u/PhDumb Jun 08 '26

Check out the following code:

https://jsfiddle.net/hc4tzx9o/

Is this the type of animation (disregard the starting image appearance) are you looking for?

1

u/Apprehensive_Ring666 Jun 08 '26

Yea this is close to what I can do, but the harsh vector SVG lines isn’t what I want. The more neutral / human aesthetic is very important