I am using Three.js and i have a problem, i followed this video fhttps://www.youtube.com/watch?v=pUgWfqWZWmM and my problem begin at 48 minutes. my mousemove event for moving on x,y and z axes is not working.I found this error message Sorry for bad my english. Hope your guys can help me
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()
The code itself seems to work as expected. I suggest you use the following code as a template. Organized the app a bit different compared to your approach.
let camera, scene, renderer; let sphere; let mouseX = 0; let mouseY = 0; let targetX = 0; let targetY = 0; const windowX = window.innerWidth / 2; const windowY = window.innerHeight / 2; const clock = new THREE.Clock() init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 4; scene = new THREE.Scene(); const geometry = new THREE.SphereGeometry(); const material = new THREE.MeshNormalMaterial({ flatShading: true }); sphere = new THREE.Mesh(geometry, material); scene.add(sphere); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); document.addEventListener('mousemove', onDocumentMouseMove); } function onDocumentMouseMove(event) { mouseX = (event.clientX - windowX); mouseY = (event.clientY - windowY); } function animate() { requestAnimationFrame(animate); targetX = mouseX * 0.001; targetY = mouseY * 0.001; const elapsedTime = clock.getElapsedTime() // Update objects sphere.rotation.y = 0.5 * elapsedTime; sphere.rotation.y += 0.5 * (targetX - sphere.rotation.y) sphere.rotation.x += 0.5 * (targetY - sphere.rotation.x) sphere.rotation.z += 0.5 * (targetY - sphere.rotation.x) renderer.render(scene, camera); } body { margin: 0; } <script src="https://cdn.jsdelivr.net/npm/three@0.135.0/build/three.min.js"></script>