I'm trying to make a website with three.js, the problem is that I don't know how to align and being responsive the mesh at the same time, I align the mesh like this.

cube.position.x = -20

But when I resize the window it doesn't move. How can I make it responsive and align it the the left?

here is my code

const geometry = new THREE.BoxGeometry( 29, 20, 3  )
const material = new THREE.MeshBasicMaterial( { map: cubetexture } );
const cube = new THREE.Mesh( geometry, material );
cube.position.x = -20
scene.add(cube)

var clock = new THREE.Clock();

function animate() {
  requestAnimationFrame( animate );
  const time = clock.getElapsedTime();

  cube.position.y = Math.cos( time ) * 2;
  cube.rotateY(Math.cos( time ) * 0.002)
  renderer.render( scene, camera );
}

animate()

thank you in advance:)