Refactor XR session handling into a script

[willeastcott]

This PR will make it easier to migrate the examples to Editor projects (where everything's a script).
Also saved icons to SVG files.

[Copilot]

Pull Request Overview

This PR refactors XR session handling by moving the XR session management logic from JavaScript into a reusable script component, making it easier to migrate examples to Editor projects where everything needs to be script-based. The refactoring also replaces inline SVG icons with CSS classes that reference external SVG files.

• Extracts XR session management logic from example.mjs into a new xr-session.mjs script
• Replaces inline SVG icons with CSS classes and external SVG files
• Updates all HTML example files to include the new XR session script
• Simplifies button creation by using CSS classes instead of embedding SVG content

Reviewed Changes

Copilot reviewed 13 out of 18 changed files in this pull request and generated 4 comments.

File	Description
examples/assets/scripts/xr-session.mjs	New script that handles XR session lifecycle, camera transforms, and keyboard controls
examples/js/example.mjs	Removes XR session logic and icon constants, simplifies button creation with CSS classes
examples/css/example.css	Adds CSS background images for icon buttons and updates background property names
Multiple HTML files	Adds the new xr-session script asset and component to all XR-enabled examples

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The error message on line 116 should be more specific about which entity is missing the camera component. Consider including the entity name or path in the error message.

Suggested change

	console.error('XrSession: No cameraEntity.camera found on the entity.');
	console.error(`XrSession: No cameraEntity.camera found on entity "${this.cameraEntity.name}" (path: ${this.cameraEntity.getPath()}).`);

[Copilot]

Using document.querySelector directly creates tight coupling to the DOM structure. Consider passing the sky element as a parameter or using the PlayCanvas entity system to find sky components instead.

Suggested change

	}
	if (!this.skyEntity) {
	this.skyEntity = this.findSkyEntity();
	}
	const sky = this.skyEntity;
	if (!sky) return;
	const skyComp = sky.sky;
	if (this.originalSkyType === null) {
	this.originalSkyType = skyComp ? skyComp.type : null;
	}
	if (skyComp) {
	skyComp.type = 'none';
	}
	}
	/** @private */
	restoreSky() {
	if (!this.skyEntity) {
	this.skyEntity = this.findSkyEntity();
	}
	const sky = this.skyEntity;
	if (!sky) return;
	const skyComp = sky.sky;
	if (this.originalSkyType !== null) {
	if (skyComp) {
	skyComp.type = this.originalSkyType || 'none';
	}
	this.originalSkyType = null;
	}
	}
	/**
	* Finds the sky entity in the scene.
	* @private
	* @returns {Entity|null}
	*/
	findSkyEntity() {
	// Try to find by name
	let sky = this.app.root.findByName('Sky');
	if (sky && sky.sky) return sky;
	// Try to find by tag
	const skyEntities = this.app.root.findByTag('sky');
	for (let i = 0; i < skyEntities.length; i++) {
	if (skyEntities[i].sky) return skyEntities[i];
	}
	// Fallback: search all children for sky component
	const allEntities = this.app.root.find(function (node) {
	return node.sky !== undefined;
	});
	if (allEntities && allEntities.length > 0) return allEntities[0];
	return null;
	}

[Copilot]

Duplicate DOM query for the sky element. Consider storing the sky element reference or extracting the sky finding logic into a separate method to avoid repeated queries.

Suggested change

	const sky = document.querySelector('pc-sky');
	const sky = this.getSkyElement();

[Copilot]

The change from 'background' to 'background-color' is correct for specificity, but this could potentially override background images set by the icon classes. Consider using a more specific selector or ensuring proper CSS cascade order.

Suggested change

	background-color: rgba(255, 255, 255, 0.9);
	/* background-color moved to .example-button:not(.icon) */