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:
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)
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 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();