I am trying to create an effect similar to this, https://aframe.io/. Where the object builds itself when the page loads. I have tried searching through the code and can't find how to animate it.
I found a few pieces of code similar to this,
<a-entity rotation="-20 0 0" position="0 0 10.75" scale="1 0 1">
<a-animation attribute="scale" to="1 1 1" delay="200" dur="1000" easing="ease-out"></a-animation>
<a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0">
easing="ease-out" would be the only thing I can see relating to that effect.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I saw some codes and I tried to compile them together. It doesn't work and I might miss something.
Glitch full code
Two issues,
function name (movekamera) instead of a call (movekamera())
<a-animation> is deprecated - use animation instead.
Your code with these changes:
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<a-scene background="color: #FAFAFA">
<a-entity
id="mouseCursor"
cursor="rayOrigin: mouse"
raycaster="objects: #box,#plane,#cylinder"
></a-entity>
<a-entity
id="box"
geometry="primitive: box"
material="color: red"
position="-1 1 -3"
rotation="0 30 0"
onclick="kameramove_1()"
></a-entity>
<a-cylinder
id="cylinder"
position="1 0.75 -3"
radius="0.5"
height="1.5"
color="#FFC65D"
shadow
onclick="kameramove_1_back()"
></a-cylinder>
<a-plane
id="plane"
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
color="#7BC8A4"
onclick="kameramove_1()"
>
</a-plane>
<a-entity movement-controls="fly: true" position="0 0 0"></a-entity>
<a-entity camera position="0 1.6 0" look-controls></a-entity>
<a-entity id="camentity" rotation="0 0 0"
animation__1="property: position; from: 0 0 0; to: -4 0 -5; dur: 500;
startEvents: movecam_1"
animation__bc ="property: position; to: 0 0 0; from: -4 0 -5; dur: 500; startEvents: movecam_1_bc">
<a-camera id="cam"></a-camera>
</a-entity>
</a-scene>
<script>
function kameramove_1() {
document.querySelector("#cam").emit("movecam_1");
}
function kameramove_1_back() {
document.querySelector("#cam").emit("movecam_1_bc");
}
</script>
I am interested in setting up an AFrame scene which has the exact same camera motion than the one we get when we invoke the 'Inspector (Ctrl+Alt+I)'.
left click used to move the camera
wheel for zooming
right click moves with no rotations the camera
It is an equivalent set up that would be found in the CAD - CAO softwares like rhino for example.
For the moment I have this set up, which has not the wheel-zooming, and that is not natural:
<a-entity look-at="#WorldFrame" look-controls>
<a-entity position="7 0 -7" rotation="0 135 0">
<a-camera fov="20" zoom="0.6" look-controls="enabled:false">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
</a-entity>
Any clue?
thanks
EDIT:
the right configuration for the left-click seems to be the following:
<a-entity id="cameraTarget" position="0 0 0" rotation="0 0 0" look-controls >
<a-entity position="7 0 7" >
<!-- Disable the default wasd controls we are using those to control the ship -->
<a-camera id="cameraID" fov="20" zoom="0.6" look-controls="enabled:false">
<a-cursor></a-cursor>
</a-camera>
</a-entity>
</a-entity>
I still have no clue for the wheel and right click?
You can use aframe-orbit-controls
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls#1.2.0/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/aframe-supercraft-loader#1.1.3/dist/aframe-supercraft-loader.js"></script>
</head>
<body>
<a-scene>
<a-entity supercraft-loader="name: icky-snake"></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15"></a-entity>
</a-scene>
</body>
i have an issue with the camera zoom in AFRAME vr-mode on mobile or in other vr gear. i have built a zoom animation it doesnt work on mobile or in other vr gear.
can someone help pls.
here is the code:
<a-entity id="cam-vr" camera="zoom:1; active:false " rotation="0 0 0" look-controls>
<a-animation begin="cursor-fusing" delay=" 3000" attribute="camera.zoom" from="1" to="4" dur="1000"></a-animation>
<a-animation begin="click" delay="500" attribute="camera.zoom" from="4" to="1" dur="1000"></a-animation>
<a-entity id="cursor" visible="false" cursor="fuse: true; fuseTimeout:4000" geometry="primitive: ring; radiusInner: 0.012; radiusOuter: 0.02; thetaLength: 360; thetaStart: 0" rotation="0 0 90" position="0 0 -1" material="color: black; side: double; shader: flat">
<a-animation begin="cursor-fusing" attribute="geometry.thetaLength" from="360" to="0" easing="linear" dur="3000"></a-animation>
<a-animation begin="mouseleave" attribute="geometry.thetaLength" from="360" to="360" dur="0"></a-animation>
</entity>
</a-entity>
This isn't possible — in VR with A-Frame or three.js, you are rendering with THREE.VREffect, not simply a THREE.PerspectiveCamera, and there is not a simple equivalent of zooming in while preserving correct left/right eye alignment.
FPS patterns don't always work so well in VR, either. You could move the camera closer to the content, but this can also create nausea for users in VR. It may be better to consider VR-appropriate alternatives, like teleporting.
I have a A-Sky image that appears fine in Firefox, but doesn't appear in Chrome.
All other images work fine across both browsers, so not sure why this problem is occurring.
Github: https://github.com/ybinstock/OzymandiasWebVR
Github Pages: https://ybinstock.github.io/OzymandiasWebVR/
<a-scene>
<a-camera wasd-controls-enabled="false"></a-camera>
<a-mountain color="#F8981E"></a-mountain>
<a-sky src="desert.jpg" rotation="0 0 0"></a-sky>
<a-image id="trader" src="trader.jpg">
<a-animation attribute="position" from="0 2 -20" to="0 2 -1" dur="5000"
></a-animation>
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-image>
<a-image id="legs" src="legs1.jpg" position="4 2 -4" material="opacity: 0">
<a-animation attribute="material.opacity" begin="fade" to=".8"></a-animation>
</a-image>
<a-image id="head" src="head1.jpg" position="-2 0 -4" rotation="0 0 90" material="opacity: 0">
<a-animation attribute="material.opacity" begin="fade" to=".8"></a-animation>
</a-image>
<a-image id="text" src="text.png" position="0 1.5 -1" material="opacity: 0">
<a-animation attribute="material.opacity" begin="fade" to="1"></a-animation>
</a-image>
<a-entity id="poem" geometry="primitive: plane" visible="false" material="color: blue"
sound="src: url(poetry2.mp3); volume: 3; autoplay: true; loop: false"></a-entity>
<a-entity id="wind" geometry="primitive: plane" visible="false" material="color: blue"
sound="src: url(wind2.mp3); volume: 3; autoplay: true; loop: true"></a-entity>
</a-scene>
The image is huge and taking time to load. 13000x6500 pixels. Try resizing it down.
Is there a way to chainlink an animation in aframe? I am trying to once clicked move a cube to a position, hold that position for x amount of time, then animate back to the original spot.
So far I have just 2 animations the second is beginning when listening for an animationend event. Problem is, then both animations emit an animationend which in turn triggers the second animation over and over. This approach doesn't seem to be right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Curved Images</title>
<meta name="description" content="Curved Images - A-Frame">
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity position="0 1.8 4">
<a-entity camera look-controls wasd-controls>
<a-entity position="0 0 -3"
geometry="primitive: ring; radiusOuter: 0.30;
radiusInner: 0.20;"
material="color: cyan; shader: flat"
cursor="maxDistance: 30; fuse: true">
<a-animation begin="click" easing="ease-in" attribute="scale"
fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
</a-entity>
</a-entity>
</a-entity>
<a-box id="orange-cube" position="0 3.5 -2" rotation="30 30 0" width="2" depth="2"
height="2" color="#583C87" roughness="0.8">
<a-animation begin="click" attribute="position" from="0 3.5 -2" to="3 2 -2"
easing="linear" dur="2000" fill="forward"></a-animation>
<a-animation begin="fade" attribute="position" from="3 2 -2" to="0 3.5 -2"
easing="linear" dur="2000" fill="backwards"></a-animation>
</a-box>
</a-scene>
<script type="text/javascript">
document.querySelector('#orange-cube').addEventListener('animationend', function () {
document.querySelector('#orange-cube').emit('fade');
});
//document.querySelector('#orange-cube').emit('fade');
</script>
</body>
</html>
You can play animations by doing animationEl.play(). You could write some JS to trigger the animations based on the conditions you want. The declarative API (A-Frame 0.2.0) does not currently support animation sequences.
A D3 approach.
Here is a CodePen example that demonstrates what you ask for (I hope!). Using D3, you can schedule a second animation/transition after the first finishes with:
.each('end', <function>);
I wasn't sure how long to hold the cube in its new position, if 1 second is too short you can change the delay by modifying line 19 (in milliseconds):
.delay(1000)
A-Frame exposes the tween.js object so you can wire it up yourself.
AFRAME.TWEEN
https://github.com/tweenjs/tween.js/
I will be writing my own new animation components to hopefully deprecate <a-animation> tags which are limited and don't fit within the framework.