aiden/VR-Web-Player
1
0
Fork 0
forked from EXT/VR180-Web-Player
Code Actions Activity

Merge 2D branch: Fix canvas resizing bug in 2D mode

Browse Source
This commit is contained in:
Michael Verdi
2025-08-01 12:37:36 -05:00
parent 957f1af8b0 3472e2a385
commit 090ad5f315
1 changed files with 63 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
vr180player/vr180-player.js
View File

@@ -832,16 +832,30 @@ function onWindowResize() {
if (renderer.xr && renderer.xr.isPresenting) return; if (renderer.xr && renderer.xr.isPresenting) return;
if (is2DMode) { if (is2DMode) {
// In 2D mode, resize to match video element dimensions // In 2D mode, calculate canvas size based on container dimensions
if (video) { const container = document.getElementById('vr-container');
const videoRect = video.getBoundingClientRect(); if (container) {
const videoWidth = videoRect.width; const containerRect = container.getBoundingClientRect();
const videoHeight = videoRect.height; const containerWidth = containerRect.width;
renderer.setSize(videoWidth, videoHeight); // Calculate height based on 16:9 aspect ratio
camera2D.aspect = videoWidth / videoHeight; const aspectRatio = 16 / 9;
const calculatedHeight = containerWidth / aspectRatio;
// Ensure minimum dimensions to prevent zero-sized canvas
const canvasWidth = Math.max(containerWidth, 320);
const canvasHeight = Math.max(calculatedHeight, 180);
renderer.setSize(canvasWidth, canvasHeight);
camera2D.aspect = canvasWidth / canvasHeight;
camera2D.updateProjectionMatrix(); camera2D.updateProjectionMatrix();
// Update canvas styling to maintain proper positioning
const canvas = renderer.domElement;
canvas.style.width = '100%';
canvas.style.height = 'auto';
canvas.style.aspectRatio = '16/9';
// Reposition control panel after resize // Reposition control panel after resize
position2DControlPanel(); position2DControlPanel();
} }
@@ -1398,17 +1412,27 @@ function start2DMode() {
// Set 2D mode flag // Set 2D mode flag
is2DMode = true; is2DMode = true;
// Get the video element's computed dimensions // Calculate canvas size based on container dimensions (same logic as onWindowResize)
const videoRect = video.getBoundingClientRect(); const container = document.getElementById('vr-container');
const videoWidth = videoRect.width; if (container) {
const videoHeight = videoRect.height; const containerRect = container.getBoundingClientRect();
const containerWidth = containerRect.width;
// Resize renderer to match video dimensions
renderer.setSize(videoWidth, videoHeight); // Calculate height based on 16:9 aspect ratio
const aspectRatio = 16 / 9;
// Update 2D camera aspect ratio to match video const calculatedHeight = containerWidth / aspectRatio;
camera2D.aspect = videoWidth / videoHeight;
camera2D.updateProjectionMatrix(); // Ensure minimum dimensions to prevent zero-sized canvas
const canvasWidth = Math.max(containerWidth, 320);
const canvasHeight = Math.max(calculatedHeight, 180);
// Resize renderer with calculated dimensions
renderer.setSize(canvasWidth, canvasHeight);
// Update 2D camera aspect ratio
camera2D.aspect = canvasWidth / canvasHeight;
camera2D.updateProjectionMatrix();
}
// Position the canvas to match the video element // Position the canvas to match the video element
const canvas = renderer.domElement; const canvas = renderer.domElement;
@@ -1443,6 +1467,12 @@ function start2DMode() {
// Add event listeners for 2D controls // Add event listeners for 2D controls
add2DEventListeners(); add2DEventListeners();
// Add fullscreen event listeners to handle resize properly
document.addEventListener('fullscreenchange', onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange);
document.addEventListener('mozfullscreenchange', onFullscreenChange);
document.addEventListener('MSFullscreenChange', onFullscreenChange);
// Show 2D control panel // Show 2D control panel
show2DControlPanel(); show2DControlPanel();
@@ -1478,6 +1508,21 @@ function remove2DEventListeners() {
renderer.domElement.removeEventListener('touchstart', onTouchStart); renderer.domElement.removeEventListener('touchstart', onTouchStart);
renderer.domElement.removeEventListener('touchmove', onTouchMove); renderer.domElement.removeEventListener('touchmove', onTouchMove);
renderer.domElement.removeEventListener('touchend', onTouchEnd); renderer.domElement.removeEventListener('touchend', onTouchEnd);
// Fullscreen events
document.removeEventListener('fullscreenchange', onFullscreenChange);
document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
document.removeEventListener('mozfullscreenchange', onFullscreenChange);
document.removeEventListener('MSFullscreenChange', onFullscreenChange);
}
function onFullscreenChange() {
if (!is2DMode) return;
// Trigger resize handling when fullscreen state changes
setTimeout(() => {
onWindowResize();
}, 100); // Small delay to ensure fullscreen transition is complete
} }
async function actualSessionToggle() { async function actualSessionToggle() {