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.
Related
Working with a-frame, can not find a way to create something similar to 8thWall´s Cursor Place Ground. I know a-frame can support markerless AR, but I haven't been able to do it, so if anyone knows of any tutorials or hints on how to do markerless AR that would be great. Thanks.
You can use the WebXRHitTest API which is encapsulated in the ar-hit-test component.
With a setup like this:
<a-scene ar-hit-test="target:#my-objects;type:footprint;footprintDepth:0.2;">
<a-entity id="my-objects">
<a-box></a-box>
</a-entity>
</a-scene>
You can place the #my-objects entity by tapping on the floor - provided the surface was detected.
To provide some feedback, you can listen on the scene for these events:
ar-hit-test-start - when the system has started the scanning process
ar-hit-test-achieved - when the surface was found
ar-hit-test-select when the user tapped the screen to place an "anchor" with the items.
Resources:
Ada Rose Cannon tutorial - a must since she created the component
Her rollAR coaster creation app based on ar tapping
My 'tap to move'... experiment? tweet with video (ugly source code)
Where I can find the THREE.js source code of the component:
https://aframe.io/docs/0.8.0/components/laser-controls.html.
<a-entity laser-controls="hand: left"></a-entity>
The source code for the laser controls is here.
It creates all controller models (source), and adds a raycaster (source).
The controllers utilize the tracked-controls, where is the core source code.
Most of it isn't THREE (the raycaster mostly), depends what exactly are you looking for.
There's a source link on all docs on the right:
Is it possible to get the a-frame look-at component to look at the default camera? Since it does not have an ID or a class by default I don't know how to target it.
I have tried adding [camera] as the selector value as per the docs like so;
<a-text
value="Look at test"
look-at="[camera]">
</a-text>
but it does not seem to work for me. I feel I am missing something obvious here.
Any help appreciated
What you are doing is correct, but at the time the look-at component is initialized, the camera is not yet on the scene.
Try creating a component, which will wait until the scene is loaded,
this.el.sceneEl.addEventListener("loaded", (e)=>{....
or at least for window.onload.
Check it out here.
<a-text value="Look at test" look-at="#cam"></a-text>
<a-camera id="cam"></a-camera>
this should work.....
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.
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>