AFrame | Android 快速开发框架

I am wondering how I can use A-frame (https://aframe.io) to fade out my gltf model after around 3 seconds. I'm not sure exactly how I'd be able to do this. My current code is below:

I'm trying to play a sound just once when a marker is detected with the A-frame and AR.JS libraries.

I'm trying the code lines below but the sound is playing indefinite.

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.

I'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.

I 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.

I am trying to use a-frame in my existing angular application. Everything works well and i can use the a-scene within my angular component.html. However i want to register 'click' events on an a-frame component and call an existing function on my angular component.ts file

component.html

I am wondering how it would be possible in aframe if the camera reaches 20 spaces away from the point 0 0 0 to teleport them back to that point. Would something like this be easy to achieve or difficult? How can I achieve this.

I have some code written in a-frame (https://aframe.io) that can be found at https://jsfiddle.net/AidanYoung/h0cb1nq8/ And I'm trying to find a way to add an onclick event to the code below:

For example, by using camera rig, I want to move from A to B then B to C in just one single click. I normally write "to 0 0 0" in the event "onclick".

I want trigger both animations "1" and "1_1". At the moment it is only the "1_1" that is triggered by a click. I'm using a timeline from https://www.npmjs.com/package/aframe-animation-timeline-component

My code can be found in https://glitch.com/edit/#!/winter-deserted-topaz

I took an equirectangular envMap from the three.js docs sample where it appears sharp on a sphere.

If I load the same material into my aframe scene with the following params

I am wondering how it would be possible in A-frame (aframe.io) to set the color of an object to a variable. For example, if a variable called x has a value of #8F3A84 then the color of the shape will be set to that color. If the variable has a value of #738F3A then the shape will also set to that color. How can I achieve something like this? Here is the code for my shape: