背景大小不随视口大小缩放

Question

背景大小有问题。基本上，如果您要更改此页面的视口大小 https://attiliosantomo.com/sfera，背景不会遵循视口尺寸，但它会保留以前的视口尺寸，并且只有在我刷新页面背景时才会更新为视口大小。有人能帮我吗？我的背景如何通过缩放他的维度来跟随视口大小。

<!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>

非常感谢

Answer 1

您正在使用 <canva> 元素和 css (widht & height) inline，对于您的自定义 css，您应该使用 !important 和大小值
对于 <canva> 元素使用 object-fit 而不是 background-size

像这样：

canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

对不起我的英语，我不知道我写的是否正确

Answer 2

当您说“背景”时，您指的是 three.js 场景吗？

如果是这样，您需要添加一个调整大小事件侦听器来调整 canvas/scene 的大小并更新相机。

 window.addEventListener('resize', onWindowResize, false);
 
 function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

您可能还想使用 margin: '0px'

从正文中删除默认填充

背景大小不随视口大小缩放

Background size is not scaling with viewport size

html

javascript

css

three.js