aframe-htmlembed-component | HTML Component for A-Frame VR | Augmented Reality library
kandi X-RAY | aframe-htmlembed-component Summary
kandi X-RAY | aframe-htmlembed-component Summary
HTML Component for A-Frame VR that allows for interaction with HTML in VR. Demo https://supereggbert.github.io/aframe-htmlembed-component/dist/examples/index.html
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of aframe-htmlembed-component
aframe-htmlembed-component Key Features
aframe-htmlembed-component Examples and Code Snippets
Community Discussions
Trending Discussions on aframe-htmlembed-component
QUESTION
I'm creating a 3d scene using a-frame (https://aframe.io) and I need some sort of way to mirror an html div onto a plane inside a-frame. For example, lets say that there is a div with some code where I can draw on it similar a whiteboard on the bottom left corner of the screen. Everything that I draw on the whiteboard should be mirrored to the a-frame plane. That way I should be able to see my whiteboard drawing in my a-frame scene.
What I've triedI've tried using two components the a-frame html embed component (https://github.com/supereggbert/aframe-htmlembed-component) and the a-frame shader component (https://github.com/mayognaise/aframe-html-shader) and both work for displaying html in my scene on a 2d plane however the 2d plane in my scene doesn't mirror the whiteboard and doesn't update. That means when I draw something on my whiteboard, instead of mirroring onto 2d plane and showing what I've drawn in vr, there is just a whiteboard with nothing drawn on it.
Problem I need solved and the ideal solutionI need to be able to create a div in html with a whiteboard or other code on it and have the same html be displayed on a 2d plane in my scene. The 2d html on the plane should update meaning if I draw the letter "a" on my whiteboard, the letter a will appear on the 2d plane in my scene. As long as there is a div where I am able to put my 2d html (my whiteboard) and the div mirrors in vr, that would be the ideal solution. Is there some code that could accomplish this?
Am I missing something with the two component I've tried that allow me to accomplish this? (Two components: https://github.com/supereggbert/aframe-htmlembed-component and https://github.com/mayognaise/aframe-html-shader) Or maybe a different A-frame component?
Ideally I am seeking the code for a component that allows me to mirror a div onto a 3d plane in my scene, or recommend a component that allows me to display interactable content on a 2d div.
...ANSWER
Answered 2021-Jun-11 at 21:19Since your whiteboard uses canvas, you can make use of the aframe canvas component.
Then at the end of your handleUpdate()
function you want to call the component's updateTexture()
function to update your aframe texture to the current state of the whiteboard.
QUESTION
I'm passing an ImageBitmap into a webworker, to render on canvas and then generate a URL for loading into THREE.js on the main thread.
in the main thread
...ANSWER
Answered 2020-Feb-25 at 04:28This is an extension of this known bug on which I already gave an explanation here.
For your case it seems that even using the "data:URL hack-around" won't work, probably because of some other checks performed in the createImageBitmap
internal steps.
I will add a comment about this in the bug report, but for the time being, you are stuck with rasterizing that svg image on a first and use that as source for the ImageBitmap, which is I guess quite suboptimal for your case.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install aframe-htmlembed-component
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page