I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the correct size when the page is refreshed. Can anyone assist me in ensuring that my background scales appropriately with the viewport size?
<!doctype html>
<html>
<head>
<style>
@font-face{
font-family: Roslindale;
src: url("pvcweb-banner-TRIAL.woff") format('woff');
font-weight: bold;
}
.workspace {
height: 100vh;
width: 100vw;
top: 0;
left: 0;
display: grid;
place-items: center;
font: 700 12px system-ui;
}
body, html {
height: 100vh;
width: 100vw;
background-size: cover;
}
body{
overflow: hidden;
cursor: url(images/cursor.png),auto;
}
canvas {
width:100%; height:100%;
background-size: cover;
}
.header-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
opacity: 0.1;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class='header-overla' style="position: fixed; height: 100vh;">
<script>
var mousePos = {x:.5,y:.5, z:.5};
document.addEventListener('mousemove', function (event) { mousePos = {x:event.clientX/window.innerWidth, y:event.clientY/window.innerHeight, z:event.clientZ/window.innerWidth};});
var phase = 0;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var boxSize = 0.2;
var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);
var materialGreen = new THREE.MeshBasicMaterial({transparent: true, color: 0xffffff, opacity: 0.4, side: THREE.DoubleSide});
var pitchSegments = 60;
var elevationSegments = pitchSegments/2;
var particles = pitchSegments*elevationSegments
var side = Math.pow(particles, 1/3);
var radius = 30;
var parentContainer = new THREE.Object3D();
scene.add(parentContainer);
function posInBox(place) {
return ((place/side) - 0.5) * radius * 1.2;
}
//Plant the seeds, grow some trees in a grid!
for (var p = 0; p < pitchSegments; p++) {
var pitch = Math.PI * 2 * p / pitchSegments ;
for (var e = 0; e < elevationSegments; e++) {
var elevation = Math.PI * ((e / elevationSegments)-0.5)
var particle = new THREE.Mesh(geometry, materialGreen);
parentContainer.add(particle);
var dest = new THREE.Vector3();
dest.z = (Math.sin(pitch) * Math.cos(elevation)) * radius; //z pos in sphere
dest.x = (Math.cos(pitch) * Math.cos(elevation)) * radius; //x pos in sphere
dest.y = Math.sin(elevation) * radius; //y pos in sphere
particle.position.x = posInBox(parentContainer.children.length % side);
particle.position.y = posInBox(Math.floor(parentContainer.children.length/side) % side);
particle.position.z = posInBox(Math.floor(parentContainer.children.length/Math.pow(side,2)) % side);
console.log(side, parentContainer.children.length, particle.position.x, particle.position.y, particle.position.z)
particle.userData = {dests: [dest,particle.position.clone()], speed: new THREE.Vector3() };
}
}
function render() {
phase += 0.002;
for (var i = 0, l = parentContainer.children.length; i < l; i++) {
var particle = parentContainer.children[i];
var dest = particle.userData.dests[Math.floor(phase)%particle.userData.dests.length].clone();
var diff = dest.sub(particle.position);
particle.userData.speed.divideScalar(1.02); // Some drag on the speed
particle.userData.speed.add(diff.divideScalar(8000));// Modify speed by a fraction of the distance to the dest
particle.position.add(particle.userData.speed);
particle.lookAt(dest);
}
parentContainer.rotation.y = phase*3;
parentContainer.rotation.x = (mousePos.y-0.5) * Math.PI;
parentContainer.rotation.z = (mousePos.x-0.5) * Math.PI;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
Thank you for your assistance.