Such a question, I decided to insert my cap, why is it not visible?
<!-- Copyright (c) 2022 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
<a-scene
physics="driver: ammo"
landing-page
xrextras-loading
xrextras-runtime-error
xrextras-pause-on-hidden
xrface="mirroredDisplay: true; cameraDirection: front; allowedDevices: any">
<!-- Assets block loading of the scene until they are fetched. -->
<a-assets>
<a-asset-item id="pirate-hat" src="./assets/Models/pa_Man_1.glb"></a-asset-item>
<a-asset-item id="head-occluder" src="./assets/Models/head-occluder.glb"></a-asset-item>
</a-assets>
<xrextras-capture-button></xrextras-capture-button>
<xrextras-capture-preview></xrextras-capture-preview>
<a-camera
look-controls="enabled: false"
wasd-controls="enabled: false"
position="0 1.6 0"></a-camera>
<xrextras-faceanchor>
<!--
Prevents the rendering of models behind head. This must be in the scene
before any other models you want to occlude.
-->
<a-entity
gltf-model="#head-occluder"
xrextras-hider-material
position="0 0 0.25"
scale="1.2 1.1 1.35"
rotation="-6 0 0">
<a-entity
position="0 0 -0.1"
ammo-body="type: static"
ammo-shape="type: sphere; fit: manual; sphereRadius: 0.1">
</a-entity>
</a-entity>
<!-- face occluder -->
<xrextras-face-mesh xrextras-hider-material></xrextras-face-mesh>
<!-- pirate hat -->
<a-entity gltf-model="#pirate-hat" position="0 0.55 0.2" scale="5 5 5" rotation="-10 0 0">
</a-entity>
<!-- physics chain -->
</xrextras-faceanchor>
<a-light type="directional" target="#face" position="0 1.8 3" intensity="0.8"></a-light>
<a-light type="ambient" intensity="0.5"></a-light>
</a-scene>