ウィンドウのサイズを変更しますが、ズームレベルを維持します

Question

私はthree.jsで作業していて、カメラとレンダリングのしくみを知りました。現在私は、three.jsが描画するキャンバスをドラッグしてサイズを変更する機能を構築しています。

シーンが大きくならずにキャンバスをドラッグしてサイズ変更できるようにしたいと思います。だから、より大きなキャンバスは、より大きなシーンではなく、より多くのシーンを表示します。

Answer 1

あなたはまだ解決策を探しているなら、ここにあなたが達成しようとしている何をしてフィドルは次のとおりです。http://jsfiddle.net/psyrendust/8nbpehj3/（私はこのフィドルを所有していない）

あなたが視野にプレーする必要があります。

// remember these initial values 
var tanFOV = Math.tan(((Math.PI/180) * camera.fov/2)); 
var windowHeight = window.innerHeight; 

// Event Listeners 
window.addEventListener('resize', onWindowResize, false); 

function onWindowResize(event) { 

    camera.aspect = window.innerWidth/window.innerHeight; 

    // adjust the FOV 
    camera.fov = (360/Math.PI) * Math.atan(tanFOV * (window.innerHeight/windowHeight)); 

    camera.updateProjectionMatrix(); 
    camera.lookAt(scene.position); 

    renderer.setSize(window.innerWidth, window.innerHeight); 
    renderer.render(scene, camera); 

} 

希望すると便利です。