threejs Change camera position on page scroll

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<canvas id="viewport"></canvas>
<div id="div1" class="page-wrapper" >
	<h3>
	Three.js: Change camera position on page scroll
	</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis vulputate neque. Proin ullamcorper nisi libero. Praesent ac tincidunt est. Pellentesque convallis tincidunt felis, non dignissim sapien dignissim nec. Donec luctus ligula ligula, ut
        consectetur massa vulputate ac. Donec mattis feugiat iaculis. Fusce id leo at lectus ornare tempor. Suspendisse potenti. Praesent purus nisi, accumsan eu facilisis et, convallis et tellus. Quisque vestibulum lectus lectus, a aliquet ligula malesuada
        vel. Nullam vestibulum ut sapien consectetur luctus. Aenean augue lacus, sodales sit amet tincidunt vitae, facilisis in mi. Nulla facilisi.
    </p>

    <p>
        Nullam dapibus ornare tortor. Etiam elementum lacinia magna, vehicula molestie elit semper bibendum. Proin vestibulum erat libero, eu auctor diam aliquam et. Nam ac mauris nec arcu ullamcorper maximus. Aliquam auctor vel sem sit amet placerat. Nam euismod
        enim sem, eget finibus metus faucibus eget. Aliquam erat volutpat. Mauris risus justo, scelerisque nec ipsum quis, pellentesque euismod justo.
    </p>

    <p>
        Aliquam lacinia tempor sem, ut venenatis velit. Fusce interdum scelerisque diam sed ornare. Nulla commodo aliquet purus vitae tincidunt. Proin nec neque eget ante pharetra fringilla. Cras sit amet purus nunc. Etiam laoreet est at ante pharetra, ac porta
        massa varius. Fusce id iaculis nulla. Quisque luctus blandit erat, quis semper mauris vehicula nec. Suspendisse convallis nisl orci, in cursus neque consequat in. Maecenas quis ante quis magna blandit posuere. Fusce interdum dapibus leo,...

CSS

body {
	overflow-x: hidden;
    overflow-y: scroll;
	padding: 0;
	margin: 0;
}

#viewport {
    position: fixed;
	margin: 0;
	padding: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.page-wrapper {
	padding: 0px;
	margin: 12px 48px;
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - 2*48px);
	word-wrap: break-word;
}

JavaScript

let renderer;
let camera;
//let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: document.getElementById("viewport")
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
// document.body.appendChild(renderer.domElement);

camera.position.x = 1.5;
camera.position.y = 5;
camera.position.z = -1.5 + window.scrollY / 250.0;
camera.lookAt(0, 0, -1.5);

//controls = new THREE.OrbitControls(camera);

// white spotlight shining from the side, casting a shadow
let spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(9, 10, 1);
scene.add(spotLight);

let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

// example code
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
    color: 0xff0000
});
const topBox = new THREE.Mesh(geometry, material);
scene.add(topBox);

///// end of example

let animate = function() {
    requestAnimationFrame(animate);

    //controls.update();
    renderer.render(scene, camera);
};

animate();

function updateCamera(ev) {
    let div1 = document.getElementById("div1");
	camera.position.z = -1.5 + window.scrollY / 250.0;
}

window.addEventListener("scroll", updateCamera);