Three.js 摄像头旋转答案

【问题标题】：Three.js camera dome rotationThree.js 摄像头旋转
【发布时间】：2016-08-07 00:40:23
【问题描述】：

我想在 Three.js 中鼠标移动时重新创建 this rotation effect。我应该用什么来做到这一点？如何最大限度地重现这种效果？

【问题讨论】：

轨道控制允许类似的运动
并非如此。当相机位于物体上方时，它会停止。有什么办法可以改变吗？

【解决方案1】：

所以，我想不是旋转相机，而是旋转所有场景对象，我可以获得所需的效果。所以我做了以下事情：

canvas.on("mousemove", function(event) {
    var canvasWidth = canvas.outerWidth();
    var canvasHeight = canvas.outerHeight();
    var halfWidth = canvasWidth / 2;
    var halfHeight = canvasHeight / 2;
    var offsetX = canvas.offset().left;
    var offsetY = canvas.offset().top;

    // Main vars
    var mouseX = event.clientX - offsetX;
    var mouseY = event.clientY - offsetY;

    var maxDegree = 20 * Math.PI / 180;

    var rotationZ = 0;
    if (mouseX < halfWidth) {
        rotationZ = -1* (halfWidth - mouseX) * (maxDegree / halfWidth);
    } else {
        rotationZ = (mouseX - halfWidth) * (maxDegree / halfWidth);
    }

    var rotationX = 0;
    if (mouseY < halfHeight) {
        rotationX = -1* (halfHeight - mouseY) * (maxDegree / halfHeight);
    } else {
        rotationX = (mouseY - halfHeight) * (maxDegree / halfHeight);
    }

    console.log(rotationZ, rotationX);

    mshFloor.rotation.set(rotationX, 0, rotationZ);
    mshBox.rotation.set(rotationX, 0, rotationZ);
    render();
});

【讨论】：