##I tried displaying iframes using this component and the result was a blank screen.
<html>
<head>
<meta charset="utf-8" />
<title>Basic Example — AFrame HTML</title>
<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/[email protected]/build/handy-controls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/magnet-helpers.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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="hemisphe
re" 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">
<iframe src="index.html"></iframe>
</section>
</div>
</body>
</html>
The result looks something like this:
Is this wanted behaviour (iframes are not supported)?. if so, will iframe support be added in the future?
4 May 3, 2022
14 Jan 3, 2023
3 Oct 12, 2022
22 Nov 2, 2022
2 Jun 21, 2022
7 Nov 11, 2022
5 May 30, 2022
5 May 13, 2021
7 Jun 26, 2022
22 Nov 2, 2022
3 Mar 10, 2022
2 Sep 13, 2022
24 Nov 27, 2022
9 Nov 12, 2022
3 Oct 30, 2022
5 Nov 24, 2022
7 Dec 16, 2022
6 Oct 22, 2022
7 Dec 5, 2022