Three.js中GLTF对象随鼠标移动时消失问题求助

问题 #

实现GLTF模型随鼠标移动轻微旋转时，鼠标移入窗口后模型直接消失，场景基础配置正常，注释OrbitControls后问题仍存在。

原始加载代码 #

var loaded_gltf
const loader = new GLTFLoader();
loader.load('/keyboard.gltf', function(gltf) {
  loaded_gltf = gltf.scene
  scene.add( loaded_gltf );
})

引发问题的鼠标旋转控制代码 #

document.addEventListener('mousemove', onDocumentMouseMove)

let mouseX = 0 
let mouseY = 0 
let targetX = 0 
let targetY = 0 

const windowHalfX = window.innerWidth / 2
const windowHalfY = window.innerHeight / 2

function onDocumentMouseMove(event) {
  mouseX = (event.clientX - windowHalfX)
  mouseY = (event.clientXY - windowHalfY)
}

const clock = new THREE.Clock()

const loop = () => {
  targetX = mouseX * .001 
  targetY = mouseY * .001 
  const elapsedTime = clock.getElapsedTime()
  if(loaded_gltf) loaded_gltf.rotation.y -= .05 * (targetX - loaded_gltf.rotation.y)
  if(loaded_gltf) loaded_gltf.rotation.x -= .05 * (targetY - loaded_gltf.rotation.x)
  if(loaded_gltf) loaded_gltf.rotation.z -= .05 * (targetY - loaded_gltf.rotation.x)
  // controls.update()
  renderer.render(scene, camera);
  window.requestAnimationFrame(loop)
}
loop()

错误分析 #

1. 鼠标坐标属性拼写错误：event.clientXY是无效属性，正确应为event.clientY。这个错误会让mouseY变成NaN，当NaN参与旋转计算时，模型的rotation属性会被赋值为NaN，Three.js无法渲染旋转值无效的对象，导致模型消失。
2. 旋转逻辑错误：更新Z轴旋转时，错误使用了X轴的旋转值作为基准，应该使用Z轴自身的旋转值，否则会导致旋转逻辑混乱，加剧模型异常。

修复代码 #

修正鼠标移动事件 #

function onDocumentMouseMove(event) {
  mouseX = (event.clientX - windowHalfX)
  mouseY = (event.clientY - windowHalfY) // 修正为正确的clientY属性
}

修正旋转计算逻辑 #

const loop = () => {
  targetX = mouseX * .001 
  targetY = mouseY * .001 
  const elapsedTime = clock.getElapsedTime()
  
  if(loaded_gltf) {
    // Y轴跟随鼠标X方向旋转，调整符号可以改变旋转方向
    loaded_gltf.rotation.y += .05 * (targetX - loaded_gltf.rotation.y)
    // X轴跟随鼠标Y方向旋转
    loaded_gltf.rotation.x += .05 * (targetY - loaded_gltf.rotation.x)
    // Z轴旋转修正为自身基准（不需要Z轴旋转可直接删除该行）
    loaded_gltf.rotation.z += .05 * (targetY - loaded_gltf.rotation.z)
  }
  
  renderer.render(scene, camera);
  window.requestAnimationFrame(loop)
}
loop()

说明：原代码使用-=可能导致旋转方向与预期相反，改成+=更符合鼠标移动方向与模型旋转方向一致的直觉，可根据需求调整符号。

内容的提问来源于stack exchange，提问作者cbl