Move camera in Aframe [closed] - animation

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>

Related

ThreeJS building Animation

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.

AFrame and the camera motion - identical to the inspector

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>

Why does the A-Sky element show up in Firefox, but not in Chrome (A-Frame)

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.

Chain linking animations with aframe.io

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.

how to interact with obj or collada-model in AFrame

<a-assets>
<a-mixin id="ring" geometry="primitive: ring; radiusOuter: 0.20;
radiusInner: 0.15;"
material="color: cyan; shader: flat"
cursor=" fuse: true"></a-mixin>
<a-asset-item id="mancloth" src="../models/man.obj"></a-asset-item>
<a-asset-item id="manclothmtl" src="../models/man.mtl"></a-asset-item>
</a-assets>
<a-entity camera look-controls wasd-controls><a-entity mixin="ring" position="0 0 -3">
<a-animation begin="cursor-click" easing="ease-in" attribute="scale"
fill="backwards" from="0.3 0.3 0.3" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.3 0.3 0.3"></a-animation>
</a-entity>
</a-entity>
<a-obj-model scale="1 1 1" src="#mancloth" mtl="#manclothmtl"></a-obj-model>
I use the camera to interact with the obj but aframe.js shows an error on line 57766. How can I solve this problem without changing aframe.js.
var intersectedEl = intersection.object.el;
intersectedEl.emit('raycaster-intersected', {el: el,intersection:intersection});
intersection.object is a THREE.Mesh, so intersection.object.el is undefined!
This problem has been fixed at https://github.com/aframevr/aframe/pull/1497 by binding the A-Frame entity to each child of the model.
You can wait for A-Frame 0.3.0 or use the latest A-Frame master. Right now, the cursor uses a raycaster to see what object was intersected. With OBJ/COLLADA models, it creates a tree of objects. However, A-Frame was only treating the top-level object as an entity. So when the raycaster returned the object, it did not have an associated entity to emit an event with.
Now it should just work:
<a-camera><a-cursor></a-cursor></a-camera>
<a-obj-model></a-obj-model>

Resources