Размер холста Three.js

Я работаю над 3D-проектом, где мы показываем 3D-объект в веб-браузере с помощью библиотеки Three.js.

Проблема заключается в следующем:

1 модель отображается в небольшом элементе dom или когда окно браузера мало.
Затем, когда окно (или элемент dom изменено), модель становится пиксельной.

Ниже приведены некоторые снимки экрана:

Перед изменением размера:

После изменения размера:

Как это должно быть после изменения размера:

Вот часть кода, который устанавливает размеры модели (высота и ширина), и эта функция вызывается при событии изменения размера при запуске:

console.log("domChanged fired")

instance.domBoundingBox = instance.dom.getBoundingClientRect();
instance.domCenterPos.x = instance.domBoundingBox.width / 2 + instance.domBoundingBox.left;
instance.domCenterPos.y = instance.domBoundingBox.height / 2 + instance.domBoundingBox.top;

var width = instance.dom.clientWidth, height = instance.dom.clientHeight;
instance.domWidthHalf = width / 2, instance.domHeightHalf = height / 2;

// TODO: fire event to expose it to site developers

// here we should update several values regarding width,height,position
if(instance.cameraReal) {
    instance.cameraReal.aspect = instance.dom.clientWidth / instance.dom.clientHeight;
    instance.cameraReal.updateProjectionMatrix();
}

if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

Может ли кто-нибудь дать мне подсказку? Я работаю над этим уже пару дней, но до сих пор не знаю.

Ответ 1

Наконец, проблема была решена, на самом деле проблема возникла из-за того, что приложение использует объект THREE.EffectComposer, в конструкторе класса создается объект-композитор, как показано ниже:

this.composer = new THREE.EffectComposer(this.renderer3D);

Итак, для рендеринга композитор должен иметь размер, обновляемый после функции обработчика событий, например:

if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);
if(instance.composer)
    instance.composer.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

И это исправить проблему отлично:)

Ответ 2

Таким образом, элемент canvas может быть изменен как любой другой элемент. То, что вы хотите сделать, это показать рендер и камеру, чтобы изменить размер содержимого вашего холста.

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

Ответ 3

Для этих поисковых систем, если вы хотите быстро начать использовать вспомогательный помощник, который выполняет изменение размера, посмотрите этот github: https://github.com/jeromeetienne/threex.windowresize

Единственное, что вам нужно сделать, это установить его через bower и инициализировать его:

new THREEx.WindowResize(renderer, camera)