我无法移动我的 three.js 球体的 x、y、z 轴

Question

我正在使用 Three.js，但我遇到了问题， 我关注了这个视频 fhttps://www.youtube.com/watch?v=pUgWfqWZWmM，我的问题从 48 分钟开始。 我在 x、y 和 z 轴上移动的 mousemove 事件不起作用。I found this error message 对不起我的英语不好。希望你们能帮帮我

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()

Answer 1

似乎代码本身按预期工作。我建议您使用以下代码作为模板。与您的方法相比，它组织应用程序有点不同。

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>