I am facing an issue with my camera function where it initially starts off facing backwards, but as soon as I perform the first scroll, it flips around and works correctly. Please note that I am a beginner in coding.
Kindly be aware that there is additional code for other functions and elements which I have omitted for brevity.
const scene = new THREE.Scene();
//Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//Renderer
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.setZ(30);
renderer.render( scene, camera );
//Scrolling to move
function moveCamera(){
const t = document.body.getBoundingClientRect().top;
camera.position.z = t * -0.01;
camera.position.x = t * -0.0002;
camera.rotation.y = t * -0.0002;
}
document.body.onscroll = moveCamera