Is there any way I can use an image as a <a-cursor>.
<a-cursor>
</a-cursor>
I tried to put an <a-image> inside it but it doesn't works for me.
Try to place the image as a sibling of a-cursor and wrap both with the camera. Here's an example:
<a-entity id="main-camera-wrapper">
<a-camera id="main-camera">
<a-cursor id="fuse-cursor" material="opacity: 0;" position="0 0 -1"></a-cursor>
<a-image src="#my-image" position="0 0 -.99"></a-image>
</a-camera>
</a-entity>
Related
I have some objects in aframe with visible="false" meaning they aren't visible but they are still interactable even though you can't see them. Is there a solution to this?
Found a few similar cases online but no clear solution.
https://github.com/aframevr/aframe/issues/3551
https://github.com/aframevr/aframe/issues/979
<!-- CURSOR ENTITY -->
<a-entity rotation="0 0 0" position="0 0 2">
<a-entity id="camera" far: 20; camera look-controls rotation="0 0 0" wasd-controls>
<!-- MAIN CURSOR -->
<a-entity raycaster="interval: 200; objects: .clickable" cursor="fuse: true; maxDistance: 500; timeout: 1500;" id="cursor-main" position="0 0 -1.5" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03; thetaLength: 360; thetaStart: 90;" material="color: #439DC2;">
<a-animation begin="cursor-fusing" attribute="geometry.thetaLength" fill="forwards" from="360" to="0" easing="ease-in"></a-animation>
<a-animation begin="mouseleave" attribute="geometry.thetaLength" fill="backwards" from="0" to="360" dur="0"></a-animation>
</a-entity>
<a-entity id="cursor-loader" position="0 0 -1.51" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03;" material="color: #2ADD2A;">
</a-entity>
</a-entity>
</a-entity>
<a-entity ui-modal="triggerElement:#selection;" visible="false">
<a-image position="-0.7 -1 1" class="clickable" src="#one" scale="0.7 0.7 0" link="href:location1.html; on: click; visualAspectEnabled: false" src-fit></a-image>
<a-image position="0 -1 1" class="clickable" src="#two" scale="0.7 0.64 0" link="href:location2.html; on: click; visualAspectEnabled: false" src-fit></a-image>
<a-image position="0.7 -1 1" class="clickable" src="#three" scale="0.7 0.7 0" link="href:location3.html; on: click; visualAspectEnabled: false" src-fit></a-image>
<a-image class="clickable" src="#close" id="closing" scale="0.3 0.3 0" position="-0.5 -0.35 1.1"></a-image>
</a-entity>
Ideally if an object is set to visible="false" the user shouldn't be able to interact with it.
As seen in the discussion, if you want to ignore certain objects, you should not rely on visibility. The proper way would be using the objects whitelist:
<a-scene cursor raycaster='objects: .clickable>
The whitelist uses typical CSS selectors, so in the above example the raycaster would only interact with elements which have a clickable class.
You can add / remove it with the visibility:
if (condition) {
el.setAttribute('visible', 'false')
el.classList.remove('clickable')
} else {
el.setAttribute('visible', 'true')
el.classList.add('clickable')
}
You can check it out in this fiddle. Click the sphere to make the box clickable / not clickable.
A hacky workaround could be also setting the scale to 0 0 0. The element won't be visible, and won't be clickable.
I'm currently trying to animate a camera's rotation in a scene. The animation should occur after looking at a circle for 1 second.
The problem is that the bottom of the scene don't seem reachable after the animation, althrough that it is before the animation occured.
I tried first to animate the camera, then a container of the camera. The second option produced an other problem, it seems that all the sky is displaced and I don't understand how to "correct" that.
Video of the problem when the animation is on the camera
Here are two codepens :
Animation on the camera
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
<a-scene>
<a-assets>
<img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" data-position="0 0 0" alt="Table de conférence">
</a-assets>
<a-sky src="#city" rotation="0 0 0"></a-sky>
<a-circle position="-8 -5 2"
rotation="90 0 0"
geometry="radius: 1;"
material="side: double;"
>
</a-circle>
<a-entity id="camera-container" rotation="0 100 0">
<a-entity id="camera" look-controls camera="fov: 80; userHeight: 0" wasd-controls="enabled: false;">
<a-animation attribute="rotation"
dur="1000"
begin="animation__fuse-complete"
from="-31.2 4 0"
to="2 5.5 0"
></a-animation>
<a-entity id="cursor" cursor="fuse: true; fuseTimeout: 100"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.013; radiusOuter: 0.02"
material="color: #000; shader: flat"
animation__fuse="startEvents: fusing;
property: scale;
dur: 1000;
to: 0.4 0.4 0.4"
animation__fuseed="startEvents: animation__fuse-complete;
property: scale;
dur: 1;
to: 1 1 1"
>
</a-entity>
</a-entity>
</a-entity>
Animation on a container
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
<a-scene>
<a-assets>
<img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" data-position="0 0 0" alt="Table de conférence">
</a-assets>
<a-sky src="#city" rotation="0 0 0"></a-sky>
<a-circle position="-8 -5 2"
rotation="90 0 0"
geometry="radius: 1;"
material="side: double;"
>
</a-circle>
<a-entity id="camera-container" rotation="0 100 0">
<a-animation attribute="rotation"
dur="1000"
begin="animation__fuse-complete"
from="0 100 0"
to="30 100 0"></a-animation>
<a-entity id="camera" look-controls camera="fov: 80; userHeight: 0" wasd-controls="enabled: false;">
<a-entity id="cursor" cursor="fuse: true; fuseTimeout: 100"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.013; radiusOuter: 0.02"
material="color: #000; shader: flat"
animation__fuse="startEvents: fusing;
property: scale;
dur: 1000;
to: 0.4 0.4 0.4"
animation__fuseed="startEvents: animation__fuse-complete;
property: scale;
dur: 1;
to: 1 1 1">
</a-entity>
</a-entity>
</a-entity>
</a-scene>
How to correctly animate the rotation of the camera ?
I'm on Windows 10, with Chrome 59, A-Frame 0.6.1 and aframe-animation-component
Thank you in advance and have a nice day !
I came across a similar problem with being unable to reach the bottom rotation position after executing setAttribute on the camera rotation. Here is what I think is happening:
The problem arises because the rotation on the X-axis changes via code, moving from 0 to 30 degrees without there being a corresponding head motion. As a result, 30 degrees are lost off of the lower limit of -90 degrees.
I think that there is a strong intention in the design of A-Frame that visual angles that arise via head position remain consistent. If you are looking straight ahead and suddenly the angle is 30 degrees higher, yet you haven't moved your head, everything will be askew. You'd have to look downward 30 degrees to see "straight ahead", etc.
It is easy to try and code these discontinuities when A-Frame is viewed through a desktop monitor rather than a visor. I think the "solution" is going to have to be to design some way to have the camera return to its starting position when you run your animation so that it doesn't lose its correspondence to the player's head.
I'm trying something may be insane. Idea is, on mouse hover on a sphere, change the stereo camera with an image. The default camera will be the stereo camera, so on mouseleave all I have to do is set the main camera active and turn off the secondary camera. Is it possible to set the camera on run time? Any help? Thanks in advance.
<a-assets>
<img id="image1" src="image1.png"/>
<img id="image2" src="image2.jpg"/>
</a-assets>
<a-camera >
<a-image position="0 0 -1" width="0.2" height="0.2" src="#image1">
</a-camera>
<a-camera stereocam position="-47 0 -35" >
<a-cursor fuse="true" color="black" position="0 0 -1" timeout="500" src="#warning">
</a-cursor>
</a-camera>
Set the active camera.
document.querySelector('#camera2').setAttribute('camera', 'active', true);
I am trying to embed a .OBJ model into an element so that it is confined to a specific width and height, instead of a full page canvas. I'm trying to replicate the "scene" embedded into the header of https://sketchfab.com/. I would like the camera in my scene to pan round the central axis of the model(just like in the example).
I'm having trouble accomplishing this... so far, I am able to successful load the following afame scene into my browser:
<a-scene>
<a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>
But I can't get the scene to be resized and confined within a div or within a canvas (i think canvas would be better?).
I tried:
1. to nest the a-scene into a div and size the div in CSS
<div class="aframebox"><a-scene></a-scene></div>
2. I also tried to following which I guess is no longer part of version 0.3.0?
<a-scene canvas="height: 50; width: 50"></a-scene>
0.2.0 information
If someone could please let me know how to do this I would really appreciate it,
Thank you.
A-Frame's embedded component is intended to remove fullscreen styles, allowing you to style/size the canvas as needed.
<a-scene embedded></a-scene>
More details here: https://aframe.io/docs/0.3.0/components/embedded.html
Don McCurdy,
Thank you for pointing me in the right direction. I was able to finally change the scene window size. Here is the code to accomplish this.
HTML:
<a-scene class="aframebox" embedded>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>
CSS:
.aframebox {
height: 500px;
width: 500px;
}
Does anyone know how to create a button in aframe
One way to create a button with A-Frame would be to use the <a-box> primitive combined with a cursor. The following is a simple demo:
<a-scene>
<a-entity position="0 .6 4">
<a-camera>
<a-entity id="mycursor" cursor="fuse: true; fuseTimeout: 500; max-distance: 30;"
position="0 0 -5"
geometry="primitive: ring"
material="color: blue; shader: flat">
</a-entity>
</a-camera>
</a-entity>
<!-- "button" -->
<a-entity id="refresh-button" geometry="primitive: box" material="color: red" position="0 0 -2"></a>
</a-scene>
<script>
document.querySelector('#refresh-button').addEventListener('click', function() {
// Refresh stuff would go here!
});
</script>
When the cursor focuses on the "button", the click event would fire. To add text to the button, you can use this component:
https://github.com/ngokevin/aframe-text-component
Lastly, if you're looking for a more traditional "button", you could simply float a <button> element over the canvas or Iframe if you're embedding.
i like https://www.npmjs.com/package/aframe-event-set-component for the hover event. And i give my cursor an attribute (data clickable) and then i say the raycaster he should just trigger entities with the attribute. If you want to let something just be clickable if you for example enter the vr-mode simply remove the dataclickable attribute. Scene looks like this:
<a-scene cursor="rayOrigin: mouse" raycaster="objects: [data-clickable]">
<a-image id="button" data-clickable visible="true" position="2 1.75 -0.2" height="0.5" width="0.5" rotation="0 90 0" onclick="dosomething()" event-set__enter="_event: mouseenter; width: 0.53; height: 0.53;"
event-set__leave="_event: mouseleave; width: 0.5; height: 0.5;"></a-image>
<a-camera>
<a-cursor id="curseid" raycaster="objects: [data-clickable]"</a-cursor>
</a-camera>
</a-scene>
If you want that a button works just if something happend give him the attribute later:
document.getElementById('button').setAttribute('data-clickable', '');
If you done with the button use:
document.getElementById('button').setAttribute('visible', 'false');
document.getElementById('button').removeAttribute('data-clickable');
If you want that the cursor just triggers button if you for example enter vr-mode, change the raycaster="objects: .notclickable" and then give him later with this line his attribute back:
document.getElementById('curseid').setAttribute('raycaster', 'objects: [data-clickable]');
This is for now my way to do buttons, maybe there is a smarter way. I hope this helped a bit :D