THREE.JS on Webflow site not responsive and not changing to fit viewport

VOX · December 7, 2022, 5:04am

Hello,

Im having an issue on my site that’s driving me crazy and I have NO idea how to resolve it. So recently I have added some three.js to my Webflow site using codepen. Everything has worked flawlessly accept for the fact that my design is not scaling itself to whatever window it is in. For instance if I am looking at my website on my phone and then turn it on inside, the picture remains the same instead of scaling down to match the horizontal view. Hopefully im explaining this right.

Also if make my web browser thinner, my design will not get smaller with it or be responsive. Can anyone PLEASE help me solve this?

Here is my JS `

const config = {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
		time: 0.17,
		u_noise: 0.91,
		decay: 0.86,
		turb: 0.20,
		scale: 5.0,
		waves: 1.64,
		size: 1.0,
		displ: 0.0,
		broken: true,
		invert: true,
		complex: 0.1,
	}
};

const uniforms = {
	turb: {
		type: "f",
		value: 0.0
	},
	time: {
		type: "f",
		value: 0.0
	},
	u_noise: {
		type: "f",
		value: 0.0
	},
	decay: {
		type: "f",
		value: 0.0
	},
	complex: {
		type: "f",
		value: 0.0
	},
	waves: {
		type: "f",
		value: 0.0
	},
	eqcolor: {
		type: "f",
		value: 0.0
	},
	pointscale: {
		type: "f",
		value: 0.0
	},
	scale: {
		type: "f",
		value: 0.0
	},
	displ: {
		type: "f",
		value: 0.0
	},
	fragment: {
		type: "i",
		value: true
	},
	redhell: {
		type: "i",
		value: true
	}
};



class Control {
	constructor(props) {
		this.controls = new OrbitControls(props.camera, props.canvas);
		this.init();
	}
	init() {
		this.controls.target.set(0, 0, 0);
		this.controls.rotateSpeed = 1;
		this.controls.enableZoom = true;
    this.controls.minDistance = 1;
    this.controls.maxDistance = 7;
		this.controls.enableDamping = true;
		
		this.update();
	}
	update() {
		this.controls.update();
	}
}

class Particles {
	constructor(props) {
		this.scene = props.scene ? props.scene : null;
		this.clock = new THREE.Clock();
		this.init();
	}
	init() {
		this.p_grp = new THREE.Object3D();
		this.p_mat = new THREE.ShaderMaterial({
			uniforms: uniforms,
			vertexShader: document.getElementById("vertexShader").textContent,
			fragmentShader: document.getElementById("fragmentShader").textContent
		});
		this.p_geo = new THREE.IcosahedronBufferGeometry(0.5, 80);
		this.p_mes = new THREE.Points(this.p_geo, this.p_mat);
		this.scene.add(this.p_mes);
	}
	render() {
		this.p_mat.uniforms["time"].value =
			this.clock.getElapsedTime() * config.shader.time;
		this.p_mat.uniforms["turb"].value = config.shader.turb;
		this.p_mat.uniforms["u_noise"].value = config.shader.u_noise * 0.1;
		this.p_mat.uniforms["decay"].value = config.shader.decay * 0.01;
		this.p_mat.uniforms["complex"].value = config.shader.complex;
		this.p_mat.uniforms["waves"].value = config.shader.waves * 3;
		this.p_mat.uniforms["pointscale"].value = config.shader.size;
		this.p_mat.uniforms["eqcolor"].value = config.shader.color;
		this.p_mat.uniforms["fragment"].value = config.shader.broken;
		this.p_mat.uniforms["scale"].value = config.shader.scale;
		this.p_mat.uniforms["displ"].value = config.shader.displ * 0.01;
		this.p_mat.uniforms["redhell"].value = config.shader.invert;
	}
}

class Space {
	constructor(props) {
		this.name = props.name ? props.name : "Null";
		this.canvas = props.canvas ? props.canvas : null;
		this.main();
	}
	main() {
		this.renderer = new THREE.WebGLRenderer({
			canvas: this.canvas,
			antialias: true,
			alpha: true
		});
		this.clock = new THREE.Clock();
		this.scene = new THREE.Scene();
		this.camera = new THREE.PerspectiveCamera(45);
		this.camera.position.set(0, 0.5, 3);
		this.control = new Control({ camera: this.camera, canvas: this.canvas });
		//--
		this.axesHelper = new THREE.AxesHelper(2);
		this.axesHelper.position.y = -1.5;
		//this.scene.add(this.axesHelper);
		this.renderer.shadowMap.enabled = true;
		this.renderer.shadowMap.type = THREE.PCFShoftSHadowMap;
		this.init();
	}
	init() {
		const scene = this.scene;
		this.particle = new Particles({ scene });
		//--
		this.render();
		this.loop();
		this.resize();
	}
resize() {
		this.camera.aspect = window.innerWidth / window.innerHeight;
		this.camera.updateProjectionMatrix();
		this.renderer.setSize(window.innerWidth, window.innerHeight);

}

	render() {
		this.scene.rotation.y = this.clock.getElapsedTime() * config.scene.speed;
		this.camera.lookAt(this.scene.position);
		this.camera.updateMatrixWorld();
		this.renderer.render(this.scene, this.camera);
		this.control.update();
		this.particle.render();
	}
	loop() {
		this.render();
		requestAnimationFrame(this.loop.bind(this));
	}
}

const canvas = document.querySelector("canvas");
const world = new Space({ canvas });
const panel = new Panel();
window.addEventListener("resize", () => world.resize());
window.addEventListener("load", () => world.resize());


</script>

I used this codepen to make my project:
[CODEPEN](https://codepen.io/vcomics/pen/RwQgXzv)

and finally here is a read only link of my current Webflow site:
https://preview.webflow.com/preview/voxstudios?utm_medium=preview_link&utm_source=designer&utm_content=voxstudios&preview=23bc1f318ca3d4f5dfec2eb72948e82f&workflow=preview

Thank you very much and hopefully I have given you enough info. I seriously am struggling here.

tfoller · December 7, 2022, 5:52am

If you have a problem resizing the canvas, you might want to remove everything from your code except the web renderer, the scene (keep it empty), the camera and the resize event handler.
Check if it works.
If it does, put back other pieces of your code one by one until it stops working and you’ll have your answer.

People here will be able to help you with the minimal working example showing the issue, which is 1.

VOX · December 7, 2022, 6:23am

Thank you very much for responding. Unfortunately for me I am VERY new to threejs and coding in general. I have been able to figure a ton of stuff out along my journey building my site but Im not entirely sure how to do some of the things you spoke about.

Im hoping I did everything right. Here’s the steps I took to import over the Codepen to my Webflow site.

First in Webflow I made a “Canvas” Div and named it correctly following the CSS.
Next I went into my “inside Head tag” and copied over the HTML pen settings “stuff for head code” which is the following <script src="https://cdn.jsdelivr.net/npm/tweakpane@3.0.8/dist/tweakpane.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1">
after that I ran the PUG html through a PUG to HTML converter so that Webflow could read everything
and then finally I copied over all of the JS from the Codepen into my Before Body Tag

Im wondering is the resize portion of the javascript correct? I didn’t change anything and that’s exactly what’s copied from the Codepen.

VOX · December 7, 2022, 8:05am

Hey I wanted to reach back out to you to let you know that After reworking the entire code I was able to find my mistake and now my site is fully responsive. WHEN IN DOUBT REWORK THE CODE!!! lol. my error was deleting the smallest portion of code that I thought went to another part I didn’t want on my site. turns out it broke the whole code hahaha. I really appreciate your help.

but maybe you can answer a much more simpler question for me regarding click animations???

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.

my click code currently is this…

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();
		});

Any chance you can help me with this or tell me what to do?

tfoller · December 7, 2022, 10:51am

If you need a transition, you can:

Put some code into the THREE animation loop, to run on each frame, off the top of my head (you will need some extra code to start/stop this transition):

// transition from 3.0 to 5.0
config.shader.scale += (5.0 - config.shader.scale) / 3;

Use a library like GSAP, that can make transition of object properties over time, I use my own code, but there are many examples you can find out there. You can trigger those on click

Topic		Replies	Views
How do I make the three.js animation responsive? Questions animation	1	2699	March 22, 2018
How to make canvas responsive threejs wrapped in React? Questions responsive	7	3768	October 7, 2022
Morph sphere to plane geometry with complex shader material Questions textures , materials , geometry , shaders , shader-material , animation , morph-targets , threejs	6	205	June 28, 2024
Having a hard time implementing my plain threejs project into a react project without breaking it, specifically problematic with controls Questions webgl-renderer , orbit-controls , animation , react , react-three-fiber	1	1039	March 8, 2023
Three.js and Webflow and GLB Jobs	6	1070	July 22, 2022

THREE.JS on Webflow site not responsive and not changing to fit viewport

Related topics