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