Hey guys!
I have a project with a perspective camera scrolling on the z-axis, a simple loading screen (made with css) and a few models loading. I’ve been trying to set the camera to start at z 0 on each refresh and to disable scroll until the scene is fully loaded.
To set the camera position I’ve tried to use a bool variable in combination with the loading screen. I then use an if statement to set camera at 0 , it works but it gets overridden by the scroll update right after. Any ideas on how I could solve this?
Also, any suggestions on how to temporarily disable scroll until scene is loaded is highly appreciated. Thank you!
Part of my code:
let loaded = false
const loadingManager = new THREE.LoadingManager(
() =>
{
gsap.delayedCall(0.5, () =>
{
gsap.to(overlayMaterial.uniforms.uAlpha, { duration: 3, value: 0 })
loadingBarElement.classList.add('ended')
loadingBarElement.style.transform = ''
})
},
(itemUrl, itemsLoaded, itemsTotal) =>
{
const progressRatio = itemsLoaded / itemsTotal
loadingBarElement.style.transform = `scaleX(${progressRatio})`
if(progressRatio === 1)
{
loaded = true
}
}
)
The scroll setup:
let scrollY = window.scrollY
let currentSection = 0
window.addEventListener('scroll', () =>
{
scrollY = window.scrollY
const newSection = Math.round(scrollY / sizes.height)
if(newSection != currentSection)
{
currentSection = newSection
})
This is in a tick function:
if(loaded === false)
{
camera.position.z = 0
}
else
{
camera.position.z = - scrollY / sizes.height * objectsDistance
}
Thank you!