aframe | 易学教程

How can I hide an element with A-Frame?

阅读更多关于 How can I hide an element with A-Frame?

What is the best way to hide an element using A-Frame? Do I need to remove the element from the DOM? var el = document.querySelector("#yourElementId"); el.setAttribute("visible",false); David Walsh The easiest way to hide an element is the visible attribute: myElement.setAttribute("visible", false) You can also specify it on the a-frame tag itself e.g.: <a-image id="hand-overview-chart" src="#handOverviewImg" position="3 3 0" width="4" height="4" visible="false"> </a-image> Of course you'll still need javascript to trap on some event like "mouseenter" to toggle it visible: document

gltf cursor-listener click event in A-frame

阅读更多关于 gltf cursor-listener click event in A-frame

问题 I am unable to figure out why cursor-listener works fine for all the entities except for my gltf model. Here is my html <div id="myEmbeddedScene"> <a-scene embedded=""> <a-assets> <a-asset-item id="ducks" src="../images/test.glb"></a-asset-item> </a-assets> <a-box cursor-listener color="#CCC" width="3" depth="3" height="0.1" position="0 0 -2"></a-box> <a-entity cursor-listener id="duck" gltf-model="#ducks" position="0 0.1 -2" rotation="0 -90 0"></a-entity> <a-camera> <a-cursor></a-cursor> </a

How to defer or load an A-Frame scene programmatically?

阅读更多关于 How to defer or load an A-Frame scene programmatically?

I have an A-Frame scene that I want to place on a page, but I want it to load only when I tell it to. That means it should not be rendering or running until I emit an event or call a method. <body>  <a-scene> </a-scene> </body> There is currently no built-in + documented way, but there will be a feature for this later. However, there are a couple ways to do this manually: Create <a-node> Nodes (which every <a-entity> inherits from will block the scene from loading until it calls the .load() event. Create a dummy node in the scene. and call .load() when ready. <a-node id

set a loading animation with a-frame

阅读更多关于 set a loading animation with a-frame

问题 I am using a-frame to load panorama photo with the sample code below. It shows a white screen while the photo is being loaded, and it lasts a few seconds, which create a bad user experience. I want to add a loading animation while the photo is being loaded, but cannot find any useful guides. Could anyone help? <a-scene> <a-assets> <img id="sky" src="sky.png"> </a-assets> <a-sky src="#sky"></a-sky> </a-scene> 回答1: I think aframe 8 will have a built in loading screen. In the meantime here's how

How to get bounding box information from a 3D object in aframe?

阅读更多关于 How to get bounding box information from a 3D object in aframe?

问题 I am working on an aframe project that involves loading 3D objects of unknown sizes into my scene. Naturally I would want to resize the object to a certain size (like fixed height) before I put it in the scene. But how do I extract information like width, height and depth from the object's bounding box? 回答1: You'll need to use A-Frame's underlying three.js APIs here. That answer has been posted for three.js before, but here's an A-Frame version: // get three.js object from aframe entity var

Calculate the position of an element inside a photosphere

阅读更多关于 Calculate the position of an element inside a photosphere

问题 Im using an a-sky element to display a 360° photosphere. My problem is that I have to place inside the photosphere some elements that must act like 'markers'; but I do not understand how to calculate the x-y-z position of those elements. For example, lets say that I have a picture with size 4096x2048 and I want to place a simple box at 169,1349. I know the radius of the sphere (5000), i know the size of the box (I can choose a convenient size), I only know how to retrieve the position of that

Aframe video only plays muted on ios

阅读更多关于 Aframe video only plays muted on ios

i try playing a 360-video in aframe and it works fine on android and desktop but on ios it dont work. If i mute the video the starting of the video works but i need the sound. Some ideas how to fix that? Here my code: https://jsfiddle.net/237s96ka/1/ <!DOCTYPE html> <html> <head> <title>zoom-showreel</title> <meta charset="utf-8"> <meta author="" inhalt="vr-video"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="https://aframe.io/releases/0.8.2/aframe

No movement on ios - aframe.io example runs, same(?) code not? What's the different?

阅读更多关于 No movement on ios - aframe.io example runs, same(?) code not? What's the different?

问题 Under IOS, the solution no longer reacts to movements. My solution has worked and now is no longer working. Also the "hello world" example with the source code of Glitsch (see below) doesn't work anymore, but if you call the example from the a-frame start page (https://aframe.io/examples/showcase/helloworld/), it works. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR!Test VR</title> <meta name="description" content="Test VR"> <script src="https://aframe.io/aframe/dist

How to change the rotation axis for an animated A-Frame object?

阅读更多关于 How to change the rotation axis for an animated A-Frame object?

问题 Somewhat related to this question, I can't seem to find an 'in-framework' way to change the rotational axis for an A-Frame object (like Earth's tilted axis, for example). The linked question refers to changing the rotation pivot point by wrapping the object in a parent entity which will offset the child entity (see below): <a-entity rotation="0 45 0">  <a-box position="0 1 0"></a-box>  </a-entity> I've adopted a similar method but rather than offset

How to get bounding box information from a 3D object in aframe?

阅读更多关于 How to get bounding box information from a 3D object in aframe?

I am working on an aframe project that involves loading 3D objects of unknown sizes into my scene. Naturally I would want to resize the object to a certain size (like fixed height) before I put it in the scene. But how do I extract information like width, height and depth from the object's bounding box? You'll need to use A-Frame's underlying three.js APIs here. That answer has been posted for three.js before , but here's an A-Frame version: // get three.js object from aframe entity var el = document.querySelector('#my-element'); var object = el.getObject3D('mesh'); // compute bounding box var