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