Three.js相机圆顶旋转

Question

我想在Three.js中的鼠标移动上重新创建this rotation effect。我应该用什么来实现这个目标？如何重新创建这种效果最相似？

Answer 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(); 
});