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 size it is in. For instance if I am looking at my website on my phone and then turn it horizontally, the picture remains the same instead of scaling down to match the horizontal view. Also if make my web browser thinner to see how my site looks on different widths, my design will not get smaller with it or be responsive. Hopefully one of the Webflow geniuses can help me out. You all have been amazing so far.
Here is my JS I wrote from the Codepen
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.133.1/build/three.module";
import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js";
const config = {
scene: {
speed: 0.24,
position: 3
},
object: {
speed: 0.25
},
shader: {
time: 0.12,
u_noise: 1.00,
decay: 1.00,
turb: 0.23,
scale: 3.78,
waves: 2.20,
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(50);
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>
And here is my read only:
VOX Studios
and lastly if you need it, this is a link to the actual Codepen I took it all from.
CODEPEN
*EDIT
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