Three.js vertical stretch

by Trevin Avery

HTML

<div id="mount"></div>

CSS

#mount {
  position: absolute;
  width: 100%;
  height: 4000px;
  /* background: green; */
}

JavaScript

let mount = document.getElementById('mount')

let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(25, mount.clientWidth / mount.clientHeight, 1, 100)
camera.position.z = 25

let renderer = new THREE.WebGLRenderer({antialias: true, alpha: false})
//renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(mount.clientWidth, mount.clientHeight)

// add cube
let geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1)
let material = new THREE.MeshLambertMaterial({color: 0x2194ce})
let cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// add lights

scene.add(new THREE.AmbientLight(0x888888))

let pointLight = new THREE.PointLight(0xffffff, 1, 0)
pointLight.position.set(0,400,400)
scene.add(pointLight)


mount.appendChild(renderer.domElement)


let resizeObserver = new ResizeObserver(() => {
	
  /* let mount = this.$refs.mount
  
  if (!mount) {
    return
  } */

  // console.log('resize', mount.clientWidth, mount.clientHeight)
  // TODO explore reducing the actual resolution
  renderer.setSize(mount.clientWidth, mount.clientHeight)
  camera.aspect = mount.clientWidth / mount.clientHeight
  camera.updateProjectionMatrix()
  
  let cubeScale = 1 / (mount.clientHeight / 350)
  cube.scale.set(cubeScale, cubeScale, cubeScale)
})
resizeObserver.observe(mount)


function render() {
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}
render()