I am encountering an issue while working with Three.js. I followed a tutorial on YouTube (https://www.youtube.com/watch?v=pUgWfqWZWmM) and my problem arises around the 48-minute mark. The mousemove event to move on the x, y, and z axes is not functioning as expected. I discovered this error message here. Apologies for any errors in my English. I hope you all can assist me with this matter.
document.addEventListener('mousmeove', onDocumentMouseMove)
let mouseX = 0;
let mouseY = 0;
let targetX = 0;
let targetY = 0;
const windowX = window.innerWidth / 2;
const windowY = window.innerHeight / 2;
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowX)
mouseY = (event.clientY - windowY)
}
const updateSphere = (event) => {
sphere.position.y = window.scrollY * .001
}
window.addEventListener('scroll', updateSphere)
const clock = new THREE.Clock()
const tick = () =>
{
targetX = mouseX * .001
targetY = mouseY * .001
const elapsedTime = clock.getElapsedTime()
// Update objects
sphere.rotation.y = .5 * elapsedTime
sphere.rotation.y += .5 * (targetX - sphere.rotation.y)
sphere.rotation.x += .5 * (targetY - sphere.rotation.x)
sphere.position.z += .5 * (targetY - sphere.rotation.x)
// Update Orbital Controls
// controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()