How to morph on click?

Questions
1

Hey everyone!

I’m extremely new to threejs and have been teaching myself everything this far. But I have a question I can’t seem to find the answer to. I have two click eventListeners that change my perlin noise from one shape to another. It works flawlessly but when you do click it’s an instant change to the other one. I’m trying to figure out how instead of having an immediate and jarring change, to instead morph the first one into the next one gradually so it looks smooth and nice.

Please any help would be so awesome. If someone can please explain how I would rewrite my current code to work for my project. Thanks again!!!

Currently here is what my listeners look like…

window.addEventListener(“touchstart”,function(e){
config.shader.time = 0.01;
config.shader.u_noise = 0.33;
config.shader.decay = 0.86;
config.shader.turb = 0.20;
config.shader.scale = 3.0;
config.shader.waves = 10;
//config.shader.size = 1.0;
config.shader.displ = 0.0;
config.shader.broken = true;
config.shader.invert = true;
config.shader.color = 5.0;
config.shader.complex = 0.1;
pn.refresh();
});
addEventListener(“touchend”,function(e){
config.shader.time = 0.17;
config.shader.u_noise = 0.91;
config.shader.decay = 0.86;
config.shader.turb = 0.20;
config.shader.scale = 5.0;
config.shader.waves = 1.64;
//config.shader.size = 1.0;
config.shader.displ = 0.0;
config.shader.broken = true;
config.shader.invert = true;
config.shader.color = 5.0;
config.shader.complex = 0.1;
pn.refresh();
});

		window.addEventListener("mousedown", function(event){
	    config.shader.time = 0.01;
    config.shader.u_noise = 0.33;
			config.shader.decay = 0.86;
			config.shader.turb = 0.20;
			config.shader.scale = 3.0;
			config.shader.waves = 10;
			//config.shader.size = 1.0;
			config.shader.displ = 0.0;
			config.shader.broken = true;
			config.shader.invert = true;
			config.shader.color = 5.0;
			config.shader.complex = 0.1;
			pn.refresh();
		});

		
	window.addEventListener("mouseup", function(event){
		config.shader.time = 0.17;
			config.shader.u_noise = 0.91;
			config.shader.decay = 0.86;
			config.shader.turb = 0.20;
			config.shader.scale = 5.0;
			config.shader.waves = 1.64;
			//config.shader.size = 1.0;
			config.shader.displ = 0.0;
			config.shader.broken = true;
			config.shader.invert = true;
			config.shader.color = 5.0;
			config.shader.complex = 0.1;
			pn.refresh();
		});

Also for reference I am using the following CodePen to make my threejs

https://codepen.io/vcomics/pen/RwQgXzv

2

Anyone out there that can help? Please!

3

You could use THREE.MathUtils.lerp(start, end, factor) to perform a linear interpolation. Something like:

let targetNoise = 0.0;

window.addEventListener("mousedown", function(event){
    targetNoise = 0.33;
});

window.addEventListener("mouseup", function(event){
    targetNoise = 0.91;
});

// Render loop
update() {
    // u_noise will ease towards targeNoise by 3% on each frame
    config.shader.u_noise = THREE.MathUtils.lerp(config.shader.u_noise, targetNoise, 0.03);

    renderer.render(scene, camera);
    window.requestAnimationFrame(update);
}

You’d have to repeat this for each uniform you want to animate. If this starts getting too complex to maintain, you could use an animation library like GSAP (very robust) or TweenJS (simpler).

4

Hey thank you so much for replying! So I copied and paste your code into the CodePen projects javascript but it didn’t work. It actually just gave me a white screen. Im sorry for my ignorance but I’ve been teaching myself all of this so im reeeeally not great at it.

Here’s the CodePen I am using. if I can get it to work I would be happy to use it for each uniform. seeing as really im only manipulating a few.

Perlin Noise Codepen

5

You’re gonna have to elaborate. “Didn’t work” is not enough info. Have you looked at your developer console?

7

My apologies. So I basically copied and pasted the code you wrote into the codepen Ive been using. As soon as I pated it in, the screen where the original shape was turned completely white. So im assuming something broke it? And can you please explain what you mean by looking at my developer console?

8

Hey so I tried putting the code on my actual website and it made the entire three.js just not appear. So I’m thinking something is just not reading correctly. If you have another possible solution I would really appreciate it!

If for whatever reason it doesn’t work is it possible to make it so that instead of getting the new perlin noise on touch, that I could make them show randomly on page load from an array? For instance I have the first and second parameters…. Can I some how put them in a random array so that every time the homepage is loaded you get one or the other?

9

Hey, sorry. I don’t have much time to help you further. But I think you’d greatly benefit from learning what the developer console does. You can watch this video at 16:00 for a quick intro:

If your Javascript stops working, the console will most likely have descriptive error messages that tell you what went wrong. This would be very helpful in figuring out what steps you need to take to fix things.

Good luck!

10

Thank you.