Estoy usando Three.js y tengo un problema, seguí este video fhttps://www.youtube.com/watch?v=pUgWfqWZWmM y mi problema comenzó a los 48 minutos. mi evento mousemove para moverse en los ejes x, y y z no funciona. Encontré este mensaje de error Lo siento por mal mi inglés. Espero que sus chicos me puedan ayudar
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()Parece que el código en sí funciona como se esperaba. Le sugiero que use el siguiente código como plantilla. Organizó la aplicación un poco diferente en comparación con su enfoque.
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>