I test aframe in VR mode with oculust quest 2 and I can't get what I want for the player movement.
Currently I am moving forward or backward and right or left but only with the right controller.
I would like to be able to move with the left controller (not the right) and be able to change the rotation of the camera with the right controller.
How to do it please?
this is what I use for the moment
<a-entity movement-controls="constrainToNavMesh: true" position="0 0 2" >
<!-- Camera -->
<a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: highPoly;" ></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: highPoly;" ></a-entity>
thanks
Related
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>
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.
my product is below (Please see by mobile phone)
https://pano-mixer360.com/viewer/sphere/11/43
in the case of move to left or right,
touch moving by finger gesture is working well.
but,
in the case of move to up or down,
touch moving by finger gesture is not working! It's problem.
what should I do?
using
A-Frame0.5.0
Safari iOS 10
my code
<a-scene>
<a-entity position="0 0 0">
<a-entity>
<a-entity camera="userHeight: 1.6" look-controls>
<a-entity id="myCursor" cursor="fuse:true maxDistance:30; timeout:500;" scale="0.05 0.05 0.05" position="0 0 -1" geometry="primitive: ring" material="color: #00ff00; shader: flat; opacity:0.5">
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="none" from="0.3 0.3 0.3" to="0.01 0.01 0.01"></a-animation>
</a-entity>
</a-entity>
</a-entity>
<a-sky src="test.jpeg" rotation="0 0 0"></a-sky>
</a-scene>
by the way,
I tried clone look-controls.js
https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js
and line #L173 replace to
x: radToDeg(hmdEuler.x) + radToDeg(yawObject.rotation.x),
as using yawObject.
but It's now working.
because touch moving listener(#L301-L313) is no set rotaion.x!
perhaps,
I should calculation the rotation.x
yawObject.rotation.x = ????
but I don't understand how to calculation.
Please help me
The problem is about pitchObject not yawObject,place the code into onTouchMove function in your clone of look-controls.js
var deltaX = 2 * Math.PI * (evt.touches[0].pageY - this.touchStart.y) / canvas.clientHeight;
this.pitchObject.rotation.x -= deltaX * 0.5;
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);
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