How to create moving abstract mesh gradient background with interactivity

Questions
, ,
1

Hello. Please may you point me in the right direction for creating a moving abstract mesh gradient background with mouse interactivity like on this website.

Thank you.

2

You don’t really need 3D / three.js for that - likely way easier to use CSS filter() or CSS backdrop-filter() instead. If you’d get WebGL involved, you’ll need to write custom shaders - and it becomes a bit of a rabbit hole if you’re just starting with three.js.

3 Likes
3

There are many possible directions. Here is one for the background:

https://codepen.io/boytchev/full/MWMYdwm

6 Likes
4

Tell me about it. I’m proficient in several languages but GLSL has humbled me.

1 Like
5

Thanks Pavel! Definitely going to give it a shot. I also came across this but not sure if I will get what I want.

6

Hey @PavelBoytchev . In your solution, is there a way to control the colors and make it something other than the rainbow sequence or to remove some of the colors?

7

You can change the initial and the final color, as well as how variable the color should be.

The demo uses a TSL texture called “Scream”. The parameters are explained here, the source is hosted on github, an online sandbox is also available and the full set of textures are listed in the TSL textures project page.

2 Likes
8

Thanks!!!

9

One other option - If you are working with WebGPU, you can also use various mx_noise node functions to create a pattern on a flat plane that you set in the background. See this example where the materials are mapped to spheres.

2 Likes
10

There is backgroundNode for Scene object.
Picture:

изображение
изображение1920×955 77 KB

Demo: https://codepen.io/prisoner849/full/NWQvYXO

PS Finally, I’m on the TSL train too :sweat_smile:

7 Likes
11

All right. I’ll check it out. Thank you.

13

Hey!
By any chance did you find the solution to make it close to you mentioned one

1 Like
14

Hi @PavelBoytchev …

Is it possible to use scream.js from version 164 in version 171?

15

Hi @prisoner849 …

I tried 170 OK… but 171…
SyntaxError: The requested module ‘https://unpkg.com/three@0.171.0/build/three.webgpu.js’ doesn’t provide an export named: ‘Fn’

16

Now, imports look like this:

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.171.0/build/three.webgpu.js",
      "three/webgpu": "https://unpkg.com/three@0.171.0/build/three.webgpu.js",
      "three/tsl": "https://unpkg.com/three@0.171.0/build/three.tsl.js",
      "three/addons/": "https://unpkg.com/three@0.171.0/examples/jsm/"
    }
  }
</script>

Some context: Builds: Introduce `three.tsl.js` by sunag · Pull Request #29948 · mrdoob/three.js · GitHub

Example of the using: https://codepen.io/prisoner849/full/RNbRNRO

изображение
изображение932×860 53.8 KB

6 Likes
17

I tried changing this import for https://codepen.io/prisoner849/full/NWQvYXO, but with no success :roll_eyes:

18

Change this

  timerGlobal
} from "three";

to this

  timerGlobal
} from "three/tsl";

there.

1 Like
19

Thank You very much… :wink:

1 Like
20

Hi @TommyWolfheart …

Here goes one old shader way but in version 171, with mouse move effect…

https://jrlazz.eu5.org/anim/mouseshader.html

1 Like
21

The TSL API has not settled down yet, so it is expected that code for older TSL will break with new TSL. I have to upgrade TSL Textures to the latest TSL … once I find some spare time.

2 Likes