Блог

Я работаю с three.js и получить представление о том, как работают камера и визуализация. В настоящее время я создаю возможность перетаскивать и изменять размер холста, который three.js тоже рисует.

я хочу иметь возможность перетаскивать и изменять размер холста без увеличения сцены. Таким образом, на холсте большего размера отображается больше сцены, а не сцена большего размера.

Если вы все еще ищете решение, вот скрипка, которая делает то, чего вы пытаетесь достичь: 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 );

}
  

Надеюсь, это поможет.