I am doing setAttribute or $.attr() on entities in A-Frame. For example,
el.setAttribute('position', '2 2 2');
The position updates, but I don't see it updating in the HTML/DOM inspector. I just set <a-entity position> How come?
https://aframe.io/docs/0.3.0/components/debug.html
By default, for performance reasons, A-Frame does not update the DOM with component data. If we open the browser’s DOM inspector, we will see that many entities will have only the component name visible:
<a-entity geometry material position rotation></a-entity>
The component data is stored internally. Updating the DOM takes CPU time for converting component data, which is stored internally, to strings. However, when we want to see the DOM update for debugging purposes, we can attach the debug component to the scene. Components will check whether the debug component is enabled before trying to serialize to the DOM. Then we will be able to view component data in the DOM:
<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>
To manually serialize to DOM on demand:
<a-scene>.flushToDOM()
<a-entity>.flushToDOM()
If you wish to use an Inspector to debug, try the A-Frame Inspector. https://aframe.io/docs/0.3.0/guides/using-the-aframe-inspector.html . Just open a scene and press <ctrl> + <alt> + i.
Related
I am testing the super-hands component (https://github.com/wmurphyrd/aframe-super-hands-component) to move an object. For the same I am setting the grabbable gesture component. What I am noticing is that once I have moved the object I am unable to "shake-off" the moving viz. it continues to be in a state of grabbable. The code is simple
<a-box ... grabbable></a-box>
..
<a-entity raycaster="objects: .clickable" cursor="rayOrigin:mouse" super-hands="colliderEvent: raycaster-intersection; colliderEventProperty: els; colliderEndEvent: raycaster-intersection-cleared; colliderEndEventProperty: el"></a-entity>
Does something need to be set to disable the grabbable state?
I am trying to create a basic scene using daydream controls but the component doesn't seem to be working for me. I am using version 0.6.0.
Here is what my controls look like:
<a-camera position="-0.016155197760135586 1.6 3.256854190620799" daydream-controls="hand:right;model:true;armModel:true" wasd-controls look-controls mouse-cursor></a-camera>
Am I missing something?
Thanks,
according to the docs, the daydream controls are separate entities, like hand entities:
<a-entity daydream-controls="hand: left"></a-entity>
<a-entity daydream-controls="hand: right"></a-entity>
Please make sure You make it this way, and not by attaching the controls component to the camera.
In the following scene, I'm trying to understand why after clicking the sphere to switch cameras and cursors (via.removeAttribute/.setAttribute) still seems to swap back even if I click outside the sphere--even though the scene inspector shows no cursor or raycaster on firstCursorEl to cause the ghost click event. The test scene's at http://codepen.io/anon/pen/GWJrXe, let me know if I'm missing something important! (jhsu mentioned needing to bind render-target-loaded to wait for a loaded canvas element if .removeAttribute('cursor') was called on-init, but I'm assuming that doesn't need to happen on-click.) Here's what the entity HTML given by the inspector looks like after a swap, if it helps:
<a-entity print-onenter="" id="firstCursorEl" mixin="avatarCursor"></a-entity>
<a-entity print-onenter="" mixin="avatarCursor" id="secondCursorEl" raycaster="" cursor=""></a-entity>
Where firstCursorEl is a child of the starter camera, and secondCursorEl a child of the camera we swap to. Since secondCursorEl's cursor/raycaster are aimed away from the swap-button-sphere (unless they're somehow out of sync with the camera gaze's direction?), and firstCursorEl seems to have no such components, how does it still swap back?
This issue was fixed by Don McCurdy: https://github.com/aframevr/aframe/pull/2397 to implement cursor remove handlers.
You can use this build: <script src="https://rawgit.com/aframevr/aframe/84c6431/dist/aframe-master.min.js"></script> to pull it in until 0.5.1 or 0.6.0 is out.
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>
<!-- Don't play yet. -->
<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="dummy"></a-node>
document.getElementById('dummy').load();
Leverage asset system
You can create an asset that will never load until you tell it to, and set the timeout to effectively indefinite (later we will add a feature to not timeout).
<a-scene>
<a-assets timeout="999999999">
<a-asset-item id="trigger" src="NEVERLOADUNTILITELLITTO.whatever"></a-asset-item>
</a-assets>
</a-scene>
Then trigger.
document.querySelector('#trigger').load();
Inject scene only when ready
You could keep your scene in a separate file, template, or as a string, or using a framework with concept of Views. Only inject the scene into the DOM when you are ready for it to render. This is the most work, but currently the most air-tight method.
sceneEl.appendChild(document.createRange().createContextualFragment(str));
Pause the scene as soon as you can
This will pause the scene from rendering. However, the scene will probably have initialized some components and rendered a few frames already. So it is not air-tight.
document.querySelector('a-scene').pause();
I'm new to a-frame, so if the question is really easy please be patient with it. My question is that when a cursor hit an model it shows Uncaught TypeError: Cannot read property 'emit' of undefined.Here is my code:
<a-scene>
<a-assets>
<img id="room" src="./pics/room.jpg">
<a-asset-item id="crate-obj" src="/models/chair/Chair.obj"></a-asset-item>
<a-asset-item id="crate-mtl" src="/models/chair/Chair.mtl"></a-asset-item>
</a-assets>
<a-entity position="0 1.8 4">
<a-camera id="camera">
<a-cursor id="cursor" color="#4CC3D9"></a-cursor>
</a-camera>
</a-entity>
<a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>
<a-sky src="#room"></a-sky>
</a-scene>
You can refer to this link.aframe issue.The author said that we can workaround to create an transparent bounding box and listen for click events on that.
This problem has been fixed at https://github.com/aframevr/aframe/pull/1497 by binding the A-Frame entity to each child of the model.
You can wait for A-Frame 0.3.0 or use the latest A-Frame master. Right now, the cursor uses a raycaster to see what object was intersected. With OBJ/COLLADA models, it creates a tree of objects. However, A-Frame was only treating the top-level object as an entity. So when the raycaster returned the object, it did not have an associated entity to emit an event with.
Now it should just work:
<a-camera><a-cursor></a-cursor></a-camera>
<a-obj-model></a-obj-model>