I'm trying a similar example like Stereo-Sky A-Frame Component from this link. The demo link does not work so I have uploaded the example here after fixing the source for aframe-master.min.js.
After viewing it in VR (in my samsung s7 edge with card board), I have found that the image for both eye does not align. Especially when I try putting the pointer on the way points, I have found they are off by small amount.
I'm confused what exactly I have done wrong; is the source for A-Frame is wrong? Or the images need to be "modified" for left and right eye? Is there a settings on the device that may be messing the image render? For ease of reference I am putting the source code : -
<!DOCTYPE html>
<html>
<head>
<title>A-Frame walkthrough (final)</title>
<script src="https://rawgit.com/aframevr/aframe/3620e8e/dist/aframe-master.min.js"></script>
<script src="stereocube.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="circle" src="circle.png"/>
</a-assets>
<a-camera stereocam position="-47 0 -35" ><a-cursor fuse="true" color="#2E3A87" timeout="700">
<a-animation begin="cursor-click" easing="ease-in" attribute="scale" dur="800"
fill="backwards" from="1.0 1.0 1.0" to="100 100 100">
</a-animation>
</a-camera>
<a-mixin id="waypt" rotation="0 0 25" scale="2 2 2"></a-mixin>
<a-mixin id="spin" attribute="rotation" dur="10000" fill="forwards" to="0 360 25" repeat="indefinite"></a-mixin>
<a-mixin id="enter" begin="cursor-mouseenter" easing="ease-in" attribute="scale" dur="200" to="4 4 4"></a-mixin>
<a-mixin id="leave" begin="cursor-mouseleave" easing="ease-out" attribute="scale" dur="200" to="2 2 2"></a-mixin>
<a-box id="wp1" color="orange" href="brooke0" position="-40 -10 10" mixin="waypt" src="#circle">
<a-animation mixin="enter"></a-animation>
<a-animation mixin="leave"></a-animation>
<a-animation mixin="spin"></a-animation>
</a-box>
<a-box id="wp2" color="green" href="brooke1" position=" 0 -14 0" mixin="waypt" src="#circle" ><a-animation mixin="spin"></a-animation><a-animation mixin="enter"></a-animation><a-animation mixin="leave"></a-animation></a-box>
<a-box id="wp3" color="lightblue" href="brooke3" position=" 15 -9 35" mixin="waypt" src="#circle"> <a-animation mixin="spin"></a-animation><a-animation mixin="enter"></a-animation><a-animation mixin="leave"></a-animation></a-box>
<a-box id="wp4" color="red" href="brooke2" position="-47 -9 -35" mixin="waypt" src="#circle"> <a-animation mixin="spin"></a-animation><a-animation mixin="enter"></a-animation><a-animation mixin="leave"></a-animation></a-box>
<a-entity id="skyL" position="-47 0 -35" skycube="folder:brooke2L; eye:left" scale="1 1 -1"></a-entity>
<a-entity id="skyR" position="-47 0 -35" skycube="folder:brooke2R; eye:right" scale="1 1 -1"></a-entity>
</a-scene>
</body>
<script>
var app = {
init: function() {
// Add Click handler's to our waypoints in javascript
[].forEach.call(document.querySelectorAll('a-box'), function(box) {
box.addEventListener('click', function () {
window.setTimeout(function(){
app.setSkybox ( box.getAttribute('href') );
app.moveCamera ( box.getAttribute('position'), document.querySelectorAll('a-camera')[0] );
app.hideWaypoints(box.id);
},600)
})
});
app.hideWaypoints("wp4");
},
setSkybox: function(selectedFolder) {
document.querySelector('#skyL').setAttribute('skycube',{folder: selectedFolder+"L", eye:"left"});
document.querySelector('#skyR').setAttribute('skycube',{folder: selectedFolder+"R", eye:"right"});
},
hideWaypoints: function(boxid) {
document.querySelector('#wp4').setAttribute('visible',boxid === "wp1");
document.querySelector('#wp2').setAttribute('visible',boxid != "wp4");
document.querySelector('#wp3').setAttribute('visible',boxid != "wp4");
},
moveCamera: function(newPosition, camera) {
var pos = newPosition.x +" 0 "+ newPosition.z;
camera.setAttribute('position', pos );
// move the cubemap to the same position as the camera, to avoid distortion
document.querySelector('#skyL').setAttribute('position', pos );
document.querySelector('#skyR').setAttribute('position', pos );
},
}
app.init();
</script>
</html>
Related
I am trying to put a text next to an object then rotate it by 90 degrees. Below is the portion of the code I used.
<a-sphere
color="green"
look-at="[gps-camera]"
scale="0.49205916205718183 0.49205916205718183 0.49205916205718183"
gps-entity-place="latitude: 3.xxxxx; longitude: 101.xxxxx;">
<a-text
look-at="[gps-camera]"
value="Point 1"
color="yellow"
rotation="0 90 0"
scale="7, 7"
position="-2.5 4 0"
z-offset="3"
faceUser: true;>
</a-text></a-sphere>
<a-sphere
The result is this:
What I want to achieve is this (please ignore the background):
I tried to change all the values in this expression but nothing happens:
rotation="0 90 0"
To rotate only the text element (like on the image), you need to change the roll (rotation="0 0 90"):
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-text color="black" value="some Text" position="-0.5 0.5 -3" rotation="0 0 90"></a-text>
</a-scene>
To rotate the element around the sphere, you should rotate the sphere, not the text (provided the text is the child element). Click the sphere to see the result:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
this.el.addEventListener("click", () => {
// rotate by 90 degrees when clicked
let rot = this.el.getAttribute("rotation")
rot.z += 90
this.el.setAttribute("rotation", rot)
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
<a-sphere position="0 1.5 -3" radius="0.25" color="#EF2D5E" foo>
<a-text color="black" value="some Text" position="-0.5 0.5 0"></a-text>
</a-sphere>
</a-scene>
I recommend debugging the scene in pure a-frame.
I am new to A-Frame and still trying to figure everything out! I'm currently constructing a 3D space and would like to create a guided experience for visitors by providing dots on the floor for them to click and be transported to that position. I found this code online which is perfect but I can't get it to work.
Here is the link to my project on Glitch: https://glitch.com/~museum-exhibit-demo
This is the code for my camera:
<a-entity position="1.8 -1.1 3" rotation="0 90 0" id="pov">
<a-camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate">
<a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.015;" material="color: #CCC; shader: flat;"> </a-entity>
</a-camera>
</a-entity>
And this is the code for the cylinder:
<a-cylinder checkpoint radius="0.1.5" height="0.01" position="-0.164 0.111 2.363" color="#39BB82"></a-cylinder>
Can anyone spot where I'm going wrong?
UPDATE:
I just read the current source of aframe-extra and it seems that nothing is broken! In fact there was a backward-incompatible change in the new versions. Rather than the old syntax of:
universal-controls="movementControls: checkpoint;"
Now this new syntax should be used:
movement-controls="controls: checkpoint;"
But keep in mind that since version 3.2.7, the movement offset is calculated on all 3 XYZ axis and therefore the camera will move to the center of the checkpoint. If you want to preserve the height (y) then simply add the code below above line 83:
targetPosition.y = position.y;
Here is a complete working example:
<html>
<head>
<meta charset="utf-8">
<title>Checkpoint Control with AFrame 1.2.0</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene stats>
<!-- CAMERA -->
<a-entity position="0 0 0" id="pov">
<a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" movement-controls="controls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
<!-- CHECKPOINTS -->
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>
</a-scene>
</body>
</html>
Information below this line is not valid anymore.
As Piotr already mentioned, the new releases of Aframe-Extra are somehow broken!
Using an older version everything will work again.
Below is a working example with Aframe-extra version 3.2.7.
Once the page is fully loaded, click on the screen to lock the cursor, then point the cursor (tiny ring) at a red circle and click.
I also noted few additional options just in case:
spectator: false (switch between 1st and 3rd person view)
pointerLockEnabled:true (hide the mouse)
mode: animate (the other option is teleport)
animateSpeed: 10 (well... adjusts the animation speed)
wasd-controls="enabled: false;" (otherwise user can move around via WASD/arrow keys)
Code:
<html>
<head>
<meta charset="utf-8">
<title>Checkpoint Control with AFrame 1.2.0</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v3.2.7/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene stats>
<!-- CAMERA -->
<a-entity position="0 0 0" id="pov">
<a-camera camera="active: true; spectator: false;" look-controls="pointerLockEnabled:true" universal-controls="movementControls: checkpoint;" checkpoint-controls="mode: animate; animateSpeed: 10" wasd-controls="enabled: false;" position="0 1.6 22">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
<!-- CHECKPOINTS -->
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 20" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 16" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 12" color="#FF0000"></a-cylinder>
<a-cylinder checkpoint radius="0.5" height="0.01" position="0 0 8" color="#FF0000"></a-cylinder>
</a-scene>
</body>
</html>
This won't answer the question, but should solve your problem.
You can substitute the checkpoint-controls with a simple animation system:
you click on a cylinder
you animate the camera from the current position to the cylinder
Which could be implemented like this:
// use a system to keep a global track if we are already moving
AFRAME.registerSystem('goto', {
init: function() {
this.isMoving = false
}
})
// this component will have the actual logic
AFRAME.registerComponent('goto', {
init: function() {
let camRig = document.querySelector('#rig')
// upon click - move the camera
this.el.addEventListener('click', e => {
// check if we are already moving
if (this.system.isMoving) return;
// lock other attempts to move
this.system.isMoving = true
// grab the positions
let targetPos = this.el.getAttribute("position")
let rigPos = camRig.getAttribute("position")
// set the animation attributes.
camRig.setAttribute("animation", {
"from": rigPos,
"to": AFRAME.utils.coordinates.stringify({x: targetPos.x, y: rigPos.y, z: targetPos.z}),
"dur": targetPos.distanceTo(rigPos) * 750
})
camRig.emit('go')
})
// when the animation is finished - update the "shared" variable
camRig.addEventListener('animationcomplete', e=> {
this.system.isMoving = false
})
}
})
with a setup like this:
<!-- Camera with locked movement --/>
<a-entity id="rig" animation="property: position; startEvents: go">
<a-camera look-controls wasd-controls-enabled="false"></a-camera>
<a-entity>
<!-- Cylinder node --/>
<a-cylinder goto></a-cylinder>
You can see it working in this glitch.
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 to play a short rotation animation for this parent camera entity. I have the following a-animation:
<a-animation attribute="rotation" dur="1000" to="0 163.5761975835419 0" fill="forwards" begin="rotateCam"></a-animation>
Then, I try to set the 'to' attribute before emitting rotateCam (with animation.setAttribute(...)), but it only plays the default rotation I set in the HTML. Am I missing something?
See this fiddle for example. v0.5.0.
Thank you for your time.
After some research and talking to dirkk0 on A-Frame Slack it became clear they're going for a component-based approach. I have changed my code to apply ngokevin's animation component and it solved my problem! :)
Relevant test (AFrame v0.5.0)
HTML:
<a-scene>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" width="1" height="1" depth="1" color="#4CC3D9" animation="property: rotation; dur: 1000; startEvents: rotateBox"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
JS:
setTimeout(() => {
let box = document.querySelector('a-box');
box.setAttribute('animation', 'to', '0 20 0');
box.emit('rotateBox');
}, 2000);