New screen behaviour

src/vr180player/vr180-player.ts

@@ -1,14 +1,18 @@
 import {
 	PLANE_2D_DISTANCE,
 	PLANE_DISTANCE,
+	type HeadLockMode,
 	type ProjectionMode
 } from './config.js';
 import { bootstrapPlayer } from './bootstrap.js';
 import { createContentScene } from './rendering/content-scene.js';
 import {
+	applyHeadPositionLock as applyHeadPositionLockCore,
 	applySbsTextureWindow as applySbsTextureWindowCore,
 	hideContentMeshes as hideContentMeshesCore,
 	positionPlaneForPresentation as positionPlaneForPresentationCore,
+	resetHeadPositionLockedContent as resetHeadPositionLockedContentCore,
+	shouldLockContentToHeadPosition,
 	showActiveContentMesh as showActiveContentMeshCore
 } from './rendering/projection.js';
 import { createMediaTexture as createMediaTextureCore } from './rendering/three-utils.js';
@@ -37,7 +41,7 @@ import type { SupportedMediaAdapter } from './media/media-adapter.js';
 
 const _playerBase = new URL('.', import.meta.url).href;
 
-let playerContainer, projectionMode: ProjectionMode;
+let playerContainer, projectionMode: ProjectionMode, headLockMode: HeadLockMode;
 let scene, camera, renderer, video, sphereMaterial;
 let vr180Mesh, planeMesh, activeContentMesh;
 let xrSession = null;
@@ -62,6 +66,7 @@ let fallbackCameraControls: FallbackCameraControls | undefined;
 bootstrapPlayer(_playerBase, (context) => {
 	playerContainer = context.playerContainer;
 	projectionMode = context.projectionMode;
+	headLockMode = context.headLockMode;
 	mediaAdapter = context.mediaAdapter;
 	video = mediaAdapter.kind === 'video' ? mediaAdapter.element : undefined;
 	playBtn = context.playButton;
@@ -85,6 +90,25 @@ function positionPlaneForPresentation(isFallback2D = false) {
 	positionPlaneForPresentationCore(planeMesh, camera2D, isFallback2D, PLANE_DISTANCE, PLANE_2D_DISTANCE);
 }
 
+function updateHeadPositionLock() {
+	if (!renderer?.xr?.isPresenting || !activeContentMesh) {
+		return;
+	}
+
+	const xrCamera = renderer.xr.getCamera?.(camera) || camera;
+	applyHeadPositionLockCore(
+		activeContentMesh,
+		xrCamera,
+		projectionMode,
+		shouldLockContentToHeadPosition(headLockMode, projectionMode),
+		PLANE_DISTANCE
+	);
+}
+
+function resetHeadPositionLock() {
+	resetHeadPositionLockedContentCore(vr180Mesh, planeMesh, PLANE_DISTANCE);
+}
+
 function createMediaTexture() {
 	if (!textureManager) {
 		throw new Error('Media texture manager is not initialized.');
@@ -403,6 +427,7 @@ async function handleEnterVRButtonClick() {
 		await actualSessionToggle();
 	} else {
 		// VR is not supported - start 2D rectilinear mode
+		resetHeadPositionLock();
 		twoDMode?.start();
 	}
 }
@@ -526,6 +551,7 @@ function onVRSessionEnd(event) {
 
 	textureManager?.clearMaterial(sphereMaterial);
 	hideContentMeshes();
+	resetHeadPositionLock();
 	if (vrControlPanel) {
 		vrPanelVisibility.hideImmediately();
 	}
@@ -585,6 +611,7 @@ function renderXR(timestamp, frame) {
 		}
 	}
 	try {
+		updateHeadPositionLock();
 		textureManager?.updateIfNeeded();
 		renderer.render(scene, camera);
 	} catch (error) {