Область рендеринга Threejs сокращается до 25% при изменении размера рендеринга

Question

После вызова renderer.setSize() второй раз после настройки моих видовых экранов моя сцена уменьшится до 25% от ее исходного размера и переместится в нижнюю левую часть холст. Моему варианту использования требуется многократно называть setSize, так как я хотел бы, чтобы пользователь мог войти и выйти из полноэкранного режима по своему усмотрению.

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

Это один из three.js странице: http://i42.tinypic.com/s5a747.jpg

Это из stemkoski.github.io: http://i42.tinypic.com/313qi5u.png

Из-за этого, я не уверен, если проблема связана с моим графическая карта, мой компьютер, некоторые необычные настройки или ошибка в Three.js. Я использую macbook pro с дисплеем сетчатки, Nvidia GeForce GT 650M 1024 МБ. Я смог воспроизвести это как в хроме, так и в firefox. Как ни странно, если подключить внешний монитор к компьютеру и перетащить на него окно, проблема исчезнет после обновления страницы. Любая помощь приветствуется.

Answer 1

Как сказал Гайтат, это соотношение пикселей устройства (DPR), которое изменяется между стандартными и сетчатыми дисплеями.

Однако размер видового экрана, который необходимо отрегулировать, а не размер рендеринга. Этот код достигает 1: разрешение на 1 пиксель на Chrome и Firefox в three.js R65:

var DPR = (window.devicePixelRatio) ? window.devicePixelRatio : 1; 
var WW = window.innerWidth; 
var HH = window.innerHeight; 
renderer.setSize(WW, HH);   
renderer.setViewport(0, 0, WW*DPR, HH*DPR); 
renderer.render(scene, camera); 

Там какая-то more info on the problem here.

Answer 2

При создании средства визуализации перейдите в опцию devicePixelRatio;

var renderer = new THREE.WebGLRenderer({ 
    devicePixelRatio: window.devicePixelRatio || 1 
}); 

Вы не должны установить размер окна просмотра вручную, я думаю, devicePixelRatio был добавлен в WebGLRenderer в R54.

Answer 3

В устройстве соотношения пикселей R70 для визуализатора может быть установлен с помощью:

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)