Question

我是three.js的新手，我做了一个介绍，但我有一个奇怪的问题。当鼠标位于内容之外时（例如，我重新加载页面，光标位于浏览器的重新加载按钮上或浏览器外），该对象不可见。任何人都可以提出什么问题。

Answer 1

问题是mouseX和mouseY在运行render()时未定义。您正在将旋转绑定到鼠标，但是因为您尚未进入屏幕，所以仍然未定义mouseX和mouseY。

function render() {
    ....

    mesh4.rotation.x = mouseY;  //undefined here
    mesh4.rotation.y = mouseX;  //undefined here

    ...
}

并且仅在onDocumentMouseMove()上为mouseX和mouseY提供值

function onDocumentMouseMove( event ) { 
    var windowHalfX = window.innerWidth/2;
    var windowHalfY = window.innerHeight;
    mouseX = ( event.clientX - windowHalfX ) / 11000; // <-- gets a value here
    mouseY = ( event.clientY - windowHalfY ) / 11000; // <-- and here
}

解决方案是在init（）上将两个变量都设置为 0 ，这样在运行render（）函数时它们就不会被定义。

function init() {
    mouseX = 0;
    mouseY = 0;

    ...
}

继承人jsfiddle：https://jsfiddle.net/L6c8dhxd/3/

我希望这会有所帮助。

如果鼠标在浏览器之外，则隐藏Three.js平面

1 个答案: