У меня есть проект со сценой three.js, содержащейся в div, и я добавил кнопку, чтобы растянуть его в полноэкранный режим (и обратно).Было бы неплохо, если бы в Three.js была реализована функциональность при одном вызове функции, но добавить ее вручную не так уж и сложно.
Несколько моментов для рассмотрения:
Браузер имеет полноэкранный режим (F11 в Chrome), есть код, который можно вызывать из кода, чтобы браузер входил в полноэкранный режим, так что вы можете сделать это по нажатию кнопки.Когда браузер переходит в полноэкранный режим, вкладки и панель задач исчезают, и все ресурсы экрана доступны для вашей HTML-страницы.
function openFullscreen() {
var elem = document.getElementById("id-webglcanvas");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
elem.style.width = '100%';
elem.style.height = '100%';
}
Сцена Three.js (средство визуализации, холст) находится внутри некоторого элемента div.элемент.Он создается как элемент canvas из библиотеки three.js и добавляется как дочерний элемент с помощью appendChild.Осмотрите свой элемент div, и вы увидите там холст ребенка.Этот элемент div может иметь собственную ширину и высоту, но ширина и высота сцены / холста устанавливаются с помощью функции renderer.setSize и не зависят от div.
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(sceneWidth, sceneHeight);
var threeJSCanvas = document.getElementById("id-webglcanvas");
threeJSCanvas.appendChild( renderer.domElement );
Когда вы сообщаетебраузер, чтобы перейти в полноэкранный режим, в то же время вы хотите установить высоту и ширину div вашей сцены в полный размер экрана (но, что наиболее важно, его позицию, чтобы начать с 0,0), плюс вы должны установить размер рендерера в полноэкранный режим высоты и ширины.Возможно, вы захотите скрыть некоторые другие элементы div на странице, такие как оверлей GUI - так что вся ваша страница становится практически просто div с визуализатором.Скорее всего, у вас уже есть реализованная функция onWindowResize, которая изменяет ширину и высоту рендеринга при изменении размера окна браузера. Если это так, вам придется заставить эту функцию хорошо играть в полноэкранном режиме, потому что - она будет вызываться автоматически.Так что сделайте эту функцию своим союзником.
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
if ( myGlobalFullscreenModeVariable) {
var elem = document.getElementById("id-webglcanvas");
var sceneWidth = window.innerWidth;
var sceneHeight = elem.offsetHeight;
camera.aspect = sceneWidth / sceneHeight;
camera.updateProjectionMatrix();
renderer.setSize( sceneWidth, sceneHeight );
} else {
// my other resize code
}
}
Когда пользователь выходит из полноэкранного режима, вам нужно вернуть все обратно вручную.Измените размер div и рендерера обратно, покажите скрытые элементы и т. Д. Пользователь может выйти из полноэкранного режима двумя способами - нажатием кнопки графического интерфейса или кнопки esc.Вы можете определить функцию, которая вызывается при изменении полноэкранного режима, но вам необходимо добавить ее в качестве прослушивателя событий.
if (document.addEventListener)
{
document.addEventListener('webkitfullscreenchange', fsChangeHandler, false);
document.addEventListener('mozfullscreenchange', fsChangeHandler, false);
document.addEventListener('fullscreenchange', fsChangeHandler, false);
document.addEventListener('MSFullscreenChange', fsChangeHandler, false);
}
function fsChangeHandler()
{
if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== undefined) {
/* Run code when going to fs mode */
} else {
/* Run code when going back from fs mode */
}
}
Этот код не готов к работе сразу после установки, посколькуу вас может быть другая настройка страницы, но она перечисляет все, что вам нужно подумать, чтобы эта работа работала.