I'm trying to rotate an object on click and I'm using cursor listener to catch the touch event.
Currently I'm using animation-component.js for animating the object. However, even though im able to animate the button with loop: true but begin:click is not working
<a-entity cursor-listener id="butt"
position="-.0.4 -0.1 0.5"
obj-model="obj: #but"
scale="1 1 1"
rotation="0 0 0"
animation__rotate="begin:click; property: rotation; to: 0 360 0 "
>
Read the API. There is no begin property.
https://github.com/ngokevin/kframe/tree/master/components/animation#api
There is a startEvents property.
Related
I am trying to animate an individual vertex of a triangle primitive in a-frame using the animation tag and am having some strange results
In one case, If I try to animate as I would expect to, changing the x,y,z values like so...
<a-triangle
vertex-a="-1 1 -5"
vertex-b="-1 1 -10"
vertex-c="4 1 -10"
color="blue"
material="side: double">
<a-animation
attribute="vertex-b"
from="-1 1 -10"
to="-1 5 -10"
dur="4000"
>
</a-animation>
</a-triangle>
Fiddle https://jsfiddle.net/k7fbmo9k/
...I get the following error
'THREE.BufferGeometry.computeBoundingSphere(): Computed radius is
NaN. The "position" attribute is likely to have NaN values.'
However, If I only offer a single value like so..
<a-triangle
vertex-a="-1 1 -5"
vertex-b="-1 1 -10"
vertex-c="4 1 -10"
color="blue"
material="side: double">
<a-animation
attribute="vertex-b"
from="1"
to="5"
dur="4000"
>
</a-animation>
</a-triangle>
Fiddle https://jsfiddle.net/k7fbmo9k/1/
..it seems to 'work' as in no errors and there is animation but I have no control over it.
Am I doing something wrong?
Thanks for any advice as ever
I have a solution. Using the animation component https://www.npmjs.com/package/aframe-animation-component
the vertices will animate as expected. See example below
<a-triangle
vertex-a="-1 1 -5"
vertex-b="-1 1 -10"
vertex-c="4 1 -10"
color="blue"
material="side: double"
animation="property: vertex-b; to: -1 5 -10; dur: 1000">
</a-triangle>
Try attribute="geometry.vertexB". It might not work to animate the primitive attributes, so we animate the geometry component directly.
Otherwise, if you are comfortable enough, it is better to animate vertices at a more advanced level for performance. You can use a vertex shader.
Or you can manipulate the vertices manually:
var geometry = triangleEl.getObject3D('mesh').geometry;
geometry.attributes.position[0] += 0.1;
geometry.attributes.position[1] += 0.1;
geometry.attributes.position[2] += 0.1;
geometry.attributes.position.needsUpdate = true;
And to animate, do it in a tick handler:
AFRAME.registerComponent('animate-vertex', {
tick: function (t) {
// Animate vertex position until desired position using `t` to interpolate time.
}
});
I want to use fernandojsg's teleport controls on my A-Frame project, but the way I want to use them is with shake.js, one shake to make the teleport line appear and another one to actually teleport where you selected.
I've seen the documentations and came across the startEvents and endEvent properties, and I want to map them into the shake event... for me it sounds like I have to create a custom component to do this, but I wanted to seek help first, to see if this is possible without doing it.
So far I've made this (glitch.com/ link) but it doesn't work so far (please note that I've got some other libraries there that make use of shake, mousedown, and similar events... my plan is to activate or deactivate them depending on how the user wants to move)
<a-entity id="player" wasd-controls tap-to-walk>
<a-camera id="eyes" position="-.5 1.5 0" camera="" look-controls="" mouse-cursor="">
<a-entity id="cursor" cursor="fuse: false;"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.015; radiusOuter: 0.019"
material="color: white; shader: flat"
raycaster="far: 5; interval: 1000; objects: .clickable">
</a-entity>
<a-entity id="texto" text="value:Hola;align:center" position="0 -.3 -0.5"></a-entity>
<a-plane position="0 .7 -1" material="transparent: true; opacity: 0.5; color: #ffec04; shader:flat;" scale="1 0.2 1"></a-plane>
</a-camera>
<a-entity
teleport-controls="cameraRig: #player; teleport-origins: #eyes; startEvents:['shake','mousedown']"> </a-entity>
<a-entity id="step" sound="src: #step1"></a-entity>
</a-entity>
Thanks...
Yes you will need a some JS or a custom component to get shake.js and teleport controls to work together for two reasons:
shake.js emits its events outside the A-Frame scene on window where teleport-controls is not listening
shake.js only emits one event type, and you need to differentiate for startEvents and endEvents
But it doesn't need to be very complicated:
AFRAME.registerComponent('shake-listener', {
init: function () {
var targetEl = this.el
var count = 0
// you could also initialize the shake instance here
window.addEventListener('shake', function () {
if (++count % 2) {
targetEl.emit('shakestart')
} else {
targetEl.emit('shakeend')
}
})
}
})
Then add shake-listener to the same entity as teleport-controls="startEvents: shakestart; endEvents: shakeend"
Does anyone perhaps know the animation component property that I would add to a model in a scene to make it 'rotate' 360° (as in, when a car rotates on a circular platform at a motor show or something)? Would ideally be adding it to this and would hope to be able to make looping true or false:
<a-entity gltf-model="#id" scale="0.5 0.5 0.5" rotation="0 90 0" animation__scale="property: scale; dir: alternate; dur: 200; easing: easeInSine; loop: false; to: 1.2 1 1.2">
</a-entity>
Had a look at the anime.js readme but couldn't seem to find it.
Thank you
You can use the basic animation component:
<a-animation attribute="rotation"
dur="2000"
fill="forwards"
to="0 360 0"
repeat="indefinite"
easing="linear"
></a-animation>
The attribute is rotation, set the angle to 0 360 0, and set the easing to linear so it is smooth.
or use ngoKevin's animation component:
animation__rot="property:rotation;
dur:3000;
to:0 360 0;
loop: true;
easing:linear;"
check it out here: https://jsfiddle.net/gL0pkgz7/.
I'm using the following code for visual feedback:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring" material="color: black; shader: flat">
<a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-scene>
The problem is that this code is applied where the cursor "collide" with every primitive entity in the scene. I want it to be apply only on specific elements. (or alternatively, disable the animations on specific elements). How can I do it?
Thanks
The cursor component depends on the raycaster component. If the raycaster component is not added as an attribute of the DOM element, the cursor component will initialize one with default settings. However when provided, you can alter certain attribute values of the raycaster component to satisfy your needs.
Luckily for you, the raycaster component supports specific entities with a DOM query selector.
<a-entity cursor raycaster="objects: .clickable"></a-entity>
This will make the cursor only emit events to <a-entity>s with the class name of clickable.
Here is a link to all the raycaster component properties: raycaster component properties.
var obj = document.querySelector("#sphere");
obj.components.material.data.roughness = 0.3;
obj.components.material.update(object);
obj.components.material.flushToDOM();
//I don't think object matters for this use,
// it is only useful for shaders I believe.
I am trying to "flushToDOM()", but that doesn't seem to update the entity html material at all it is still stuck at initial settings...
<a-sphere id="sphere" position="0 0.25 -4.5" radius="1.25" color="#712ef0" transparent="true" material="color:#712ef0;transparent:true;metalness:0.3;opacity:1" geometry="primitive:sphere;radius:1.25" rotation="0 0 0" scale="1 1 1">
You should be using setAttribute('material', 'roughness', 0.3).
But there might be a bug with flushing "sub-components" like shaders and geometries. Will check out the issue.