index.html

<html>

<head>
    <meta charset="utf-8" />
    <title>Basic Example — AFrame HTML</title>
    <script>
      // WebXR requires https: to work so ensure redirected if needed.
      if (location.hostname !== 'localhost' && window.location.protocol === 'http:') window.location.protocol = 'https:';
    </script>
    <meta name="description" content="Basic Example — AFrame HTML" />
    <style>
		body {
			font-size: 16px;
		}
		* {
			box-sizing: border-box;
		}
		#dom-overlay {
			font-family: Sans-Serif;
			color: white;
		}
		#dom-overlay .overlay-footer {
			background: #00000066;
			padding: 1em;
			margin: 0;
			position:absolute;
			inset:auto 0 0 0;
		}
    </style>
	<script src="aframe-master.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/handy-work@3.1.9/build/handy-controls.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/handy-work@3.1.9/build/magnet-helpers.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
	<script src="build/aframe-html.js"></script>
</head>

<body>
	<a-scene
		webxr="overlayElement:#dom-overlay;"
		reflection="directionalLight:#dirlight;"
		renderer="alpha:true;physicallyCorrectLights:true;colorManagement:true;exposure:1;toneMapping:ACESFilmic;"
		gltf-model="dracoDecoderPath: https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/libs/draco/gltf/;"
		shadow="type: pcfsoft"
		cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;"
	>

		<a-assets>
			<a-mixin id="blink" blink-controls="cameraRig: #cameraRig; teleportOrigin: #head; collisionEntities:.navmesh;"></a-mixin>
		</a-assets>

		<a-sphere color="black" radius="0.01" id="cursor" material="shader:flat"></a-sphere>

		<a-entity id="cameraRig" spawn-in-circle="radius:3">
			<!-- camera -->
			<a-entity class="avatar-head" camera="near:0.01;" look-controls="pointerLockEnabled: false"
				wasd-controls="acceleration:20;" simple-navmesh-constraint="navmesh:.navmesh;fall:0.5;height:1.65;"
				position="0 1.65 0"></a-entity>

			<!-- Hand tracking -->
			<a-entity handy-controls="materialOverride:both;" material="color:gold;metalness:1;roughness:0;">

				<!-- These also do teleportaion for Blink controls in VR -->
				<!-- These are present for hand tracking but hands don't have joysticks so do nothing -->
				<a-entity data-right="ray" mixin="blink" cursor raycaster="showLine: true; far: 100; lineColor: red; objects: [html]; interval:100;"></a-entity>
				<a-entity data-left="ray" mixin="blink" cursor raycaster="showLine: true; far: 100; lineColor: red; objects: [html]; interval:100;"></a-entity>

				<!-- Use the finger tips for teleporting when the user points in VR with hand tracking -->
				<a-entity data-right="index-finger-tip" mixin="blink"
					blink-controls="startEvents:pose_point;cancelEvents:pose_cancel_point;endEvents:pose_point_fuseLong;">
				</a-entity>
				<a-entity data-left="index-finger-tip" mixin="blink"
					blink-controls="startEvents:pose_point;cancelEvents:pose_cancel_point;endEvents:pose_point_fuseLong;">
				</a-entity>

				<!-- These get drawn towards grabable objects, moving the whole hand and the attached elements-->
				<a-entity id="left-magnet" position="0 0.6 0" class="avatar-hand-left" data-left="grip"
					data-magnet="magnet-left"
					grab-magnet-target="startEvents:squeezestart,pose_fist;stopEvents:pose_flat_fuseShort,squeezeend;noMagnetEl:#left-no-magnet;">
				</a-entity>
				<a-entity id="right-magnet" position="0 0.6 0" class="avatar-hand-right" data-right="grip"
					data-magnet="magnet-right"
					grab-magnet-target="startEvents:squeezestart,pose_fist;stopEvents:pose_flat_fuseShort,squeezeend;noMagnetEl:#right-no-magnet;">
				</a-entity>

				<!-- markers to let us know the real location of the hands, you probably want to make them visible="false" or just make them empty <a-entities> -->
				<a-entity id="left-no-magnet" data-left="grip" data-no-magnet radius="0.01">
					<a-entity html="cursor:#cursor;html:#my-interface" position="-0.142 -0.0166 -0.02928" rotation="-80 90 0" scale="0.5 0.5 0.5"></a-entity>
				</a-entity>
				<a-entity id="right-no-magnet" data-right="grip" data-no-magnet radius="0.01"></a-entity>
			</a-entity>
		</a-entity>


		<a-light id="dirlight" shadow-camera-automatic=".navmesh" intensity="0.7"
			light="castShadow:true;type:directional" position="40 80 0"></a-light>
		<a-light type="hemisphere" ground-color="orange" color="blue" intensity="0.3"></a-light>
		<a-circle hide-on-enter-ar shadow="cast:false" class="navmesh" rotation="-90 0 0" radius="6"
			material="shader:phong;color:paleblue;"></a-circle>
		<a-entity hide-on-enter-ar position="0 -0.2 0" environment="lighting:none;preset:yavapai;skyType:atmosphere;">
		</a-entity>
		<a-torus-knot position="0 1.5 -1" radius="0.1" radius-tubular="0.02" material="shader:phong;reflectivity:0.3;" id="knot"></a-torus-knot>
		<a-entity html="cursor:#cursor;html:#my-interface" shadow position="0.25 1.5 -0.5"></a-entity>
	</a-scene>

	<div id="dom-overlay">
		<header style="pointer-events: none; user-select: none;">
			<h1>
				My Metaverse Site
			</h1>
		</header>
		<section style="display: inline-block; background: lavenderblush; color: #333333; border-radius: 1em; padding: 1em; margin:0; accent-color: hotpink;" id="my-interface">
			<h2>Change Color</h2>
			<fieldset style="border:0 none;border-top: 1px solid grey;">
				<legend>Colour</legend>
				<input onclick="handleRadio(this)" type="radio" id="color-red" name="color" value="red" checked><label for="color-red"> Red</label>
				<input onclick="handleRadio(this)" type="radio" id="color-blue" name="color" value="blue"><label for="color-blue"> Blue</label>
			</fieldset>
			<fieldset style="border-width: 0 1px; border-style: solid;border-radius: 0.5em;">
				<legend>Material:</legend>
				<input onclick="handleCheckbox(this)" id="material-wireframe" type="checkbox" name="wireframe"><label for="material-wireframe"> Wireframe</label>
				<input onclick="handleCheckbox(this)" id="material-shiny" type="checkbox" name="shiny" checked><label for="material-shiny"> Shiny</label>
			</fieldset>
			<fieldset style="border-radius: 1em;">
				<legend>Size:</legend>
				<input oninput="handleRange(this)" type="range" min="0.1" max="2" value="1" step="0.01" id="myRange" style="background-color: transparent;">
			</fieldset>
			<button onclick="AFRAME.scenes[0].exitVR()" style="display: block;">Exit Immersive</button>
		</section>
	</div>
	<script>
		function handleRadio(detail) {
			const color = detail.value;
			knot.setAttribute('material', 'color', color);
		}
		function handleRange(detail) {
			const size = detail.value;
			knot.object3D.scale.setScalar(size);
		}
		function handleCheckbox(detail) {
			const name = detail.name;
			if (name === 'wireframe') knot.setAttribute('material', 'wireframe', detail.checked);
			if (name === 'shiny') knot.setAttribute('material', 'reflectivity', detail.checked ? '0.3' : 0);
		}
	</script>
</body>

</html>