Element for displaying HTML based on THREE.js HTMLMesh
Home Page: http://ada.is/aframe-htmlmesh/
Hey Ada. Thanks for the great work with all of your repos. Your aframe-xr-boilerplate scene is brilliant!
I was having a quick play with this to see if it is possible to render videos with this method by using a simple iframe or video tag. So far it's not displaying anything. I wonder if you had tried it?
There seems to be a way using THREE.js as shown here:
https://codepen.io/asjas/pen/pWawPm
As background seems to be transparent by default sometimes having a backdrop helps, in particular when there is text.
const geometry = new THREE.PlaneGeometry( el.object3D.children[0].geometry.parameters.width*1.1,
el.object3D.children[0].geometry.parameters.height*1.1 );
const material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
plane.position.z = -.1
el.object3D.add( plane );I tend to use this relatively often. If useful to others could be an optional, disabled by default, parameter for the component. Itself with color as a parameter.
##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?
I read https://aframe.wiki/en/#!pages/gui.md page.
it say support images with img tags
const imgStyle = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}
return (
<React.Fragment>
<div id='chat-interface' class={isPC ? 'speech-bubble-PC' : 'speech-bubble-Phone'}>
<img src={plane} alt='Description of the image' style={imgStyle} />
<div id='character1'>{character}</div>
<div id='message1'>{isTyping1 ? textToDisplay1 : message1}</div>
</div>
</React.Fragment>
)
but ,but img tag not work,i want to set img be background
Search for ctx.drawImage in https://github.com/niklasvh/html2canvas/blob/6521a487d78172f7179f7c973c1a3af40eb92009/src/render/canvas/canvas-renderer.ts for an example how this can be implemented.
.speech-bubble {
position: fixed;
z-index: 500;
background: #00aabb;
border-radius: 0.4em;
width: 35%; /* 缩小为屏幕宽度的30% /
left: 40%;
transform: translateX(-50%);
top: 7.5vh; / 从上往下偏移10vh /
font-size: 30px; / 增加字体大小 /
font-weight: bold; / 加粗字体 */
color: white;
padding: 15px;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 36px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-left: 0;
margin-left: -18px;
margin-bottom: -32px;
}
<div id='chat-interface' class='speech-bubble'>
<div id='character1'>{character}</div>
<div id='message1'>{isTyping1 ? textToDisplay1 : message1}</div>
</div>
speech-bubble:after not work
While the actual cursor is visible on the screen, hovering events are not detected from the html elements.
when i used this newTransform.appendChild(htmlmesh) that can't work
I am tempted to create two canvases and two meshes where one physically sits slightly offset.
Buttons handles checkboxes radio buttons etc would be rendered to the offset one instead of the one underneath
Once that layer is rendered then render it blurred and flat colour semi transparent grey to the layer below to give a nice shadow, it's a bit more expensive but would look pretty.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.