I'm having an issue where I can't properly set the trigger event for an animation
I have a cursor
It should animate itself when it is pointed at a specific entity
The property-value pair of "startEvents: fusing" within the animation attribute doesn't work, as well as other variations like "fuse" and "fused"
My a-frame version is 0.9.2
<a-camera position="0 3 0"
wasd-controls
look-controls>
<!-- Cursor (NOTE: having issues with animation here)-->
<a-cursor fuse="true"
fuse-timeout="250"
position="0 0 -1"
geometry="primitive: ring;
radiusInner: 0.02;
radiusOuter: 0.03"
material="color: white;
shader: flat;
opacity: 0.5"
raycaster="objects: .clickable"
scale="1 1 1"
animation="startEvents: fusing;
property: scale;
from: 1 1 1;
to: 0.5 0.5 0.5;
dur: 500"
>
<a-circle radius="0.01"
color="white"
opacity="0.5"
material="shader:flat"></a-circle>
</a-cursor>
</a-camera>
<a-entity class="orb clickable"
id="orb0"
scale="1 1 1"
position="0 3 -6"> </a-entity>
The cursor needs to be a child object of a camera element, like this:
<a-camera>
<a-cursor animation="startEvents: fusing;...."></a-cursor>
</a-camera>
fusing should be working, also mouseleave will be helpful to change the cursor when you move it away from the object. Check it out in this fiddle.
I'm trying to create a web page that contains an A-Frame box that rotates 90 degrees when it's clicked. I've tried various things including using the aframe-event-set-component library. I can't quite seem to get it to work. I suspect I have a syntax problem but I cannot figure out my mistake.
Any help you can provide would be greatly appreciated.
The following is my code using the aframe-event-set-component.
Thanks in advance for your help.
Tim
<html>
<head>
<title>Cursor</title>
<meta name="description" content="Changing properties in response to cursor component events"></meta>
<meta property="og:image" content="https://raw.githubusercontent.com/ngokevin/kframe/master/components/event-set/examples/basic/preview.gif"></meta>
<script src="node_modules\aframe-event-set-component\examples\build.js">
</script>
</head>
<body>
<a-scene>
<a-entity geometry="primitive: box" material="color: #FCB241"
event-set__1="_event: click; material.color:red
attribute="rotation dur='5000' repeat='0' to='0 90 0'""
event-set__2="_event: mouseenter; material.color: #5A67A6"
event-set__3="_event: mouseleave; material.color: #FCB241"
position="-1 0 -2">
</a-entity>
<a-sky color="#D68D08"></a-sky>
<a-entity camera look-controls>
<a-entity cursor
geometry="primitive: ring; radiusInner: 0.01; radiusOuter:
0.016"
material="color: #EEE"
position="0 0 -1"></a-entity>
</a-entity>
</a-scene>
<!--githubcorner-->
<a href="https://github.com/ngokevin/kframe/tree/master/components/event-set/examples/basic/" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: fixed; bottom: 0; border: 0; left: 0; transform: rotate(180deg); opacity: 0.8">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}#keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}#media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
<!--endgithubcorner-->
</body>
</html>
`
Timothy,
If You wanna just rotate it, add the rotation attribute to the event:
event-set__1="_event: click; material.color:#ff0000;rotation:0 90 0"
On the other hand, i presume you want to have an animation, so You will have to either:
use the <a-animation> component, or use kevin's ngo animation-component: https://github.com/ngokevin/kframe/tree/master/components/animation
You'd need to declare an animation to 0 90 0, make a startEvent, and make the click emit that event:
<a-entity geometry="primitive: box" material="color: #FCB241"
event-set__1="_event: click; material.color:#ff0000;"
event-set__2="_event: mouseenter; material.color: #0000ff"
event-set__3="_event: mouseleave; material.color: #FCB241"
position="-1 0 -2"
animation__rotate="property: rotation; dir: forward; dur: 1000;
easing: easeInSine; loop: false; to: 0 90 0;
startEvents:click">
</a-entity>
The following plunk shows how to make it rotate on click with the animation component:
https://plnkr.co/edit/k9Jc5qEG0ckEovquEZi4?p=preview
If You don't want the animation, just replace Your event-set__1 with mine.
PERSONALLY i'd rather register my own component # AFRAME.registerComponent (name, definition), because I like to handle events by on own.
I want to add gradient color to the sphere, currently I am setting the color:
<a-sphere position="1 1 0" color="#ef2d5e">
<a-animation attribute="rotation" to="0 360 0" dur="10000" easing="linear" repeat="indefinite">
</a-animation>
</a-sphere>
Demo
How do I add gradient to the sphere? Is there any way.
Try https://github.com/zcanter/aframe-gradient-sky
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
<a-scene>
<!-- A Sphere -->
<a-entity geometry="primitive: sphere" material="shader: gradient; topColor: 255 100 100; bottomColor: 100 100 200; offset: 0.0001" position="0 0 -5"></a-entity>
</a-scene>
Hi I am using the master branch for aframe and the new text "component" seems to be going below the allocated height of the entity it resides in with some invisible stuff. Codepen here http://codepen.io/anon/pen/PWQXRP and try to move below the entity. Code here which was modified from the 360-image-gallery-boilerplate repo
<body>
<a-scene>
<a-assets>
<img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
</a-assets>
<a-sky id="image-360" radius="10" src="#cubes"></a-sky>
<a-entity layout="type: line; margin: 1.5" position="0 0 -3">
<a-entity
geometry="primitive: plane; height: 0.55; width: 1.9"
material="shader: flat; color: red"
text="value: Hello Worldllo Worldllo Worldllo Worldllo Worldllo Worldllo Worldllo Worldllo Worldllo Worldllo Worldllo World; color: black"></a-entity>
</a-entity>
<a-entity camera look-controls wasd-controls>
<a-cursor id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
event-set__1="_event: mouseenter; color: springgreen"
event-set__2="_event: mouseleave; color: black"></a-cursor>
</a-entity>
</a-scene>
new to aframe so have no clue what I am doing wrong
https://aframe.io/docs/master/components/text.html#scaling-geometry-to-fit-text
Scaling Geometry to Fit Text
To have the geometry automatically scale with the text, set the geometry component’s width and height properties to auto, and set the text component’s width as desired. In this example, the plane’s width will be set to 4 units, and its height will be set to match the actual height of the text:
<a-entity
geometry="primitive: plane; height: auto; width: auto"
material="color: blue"
text="width: 4; value: This text will be 4 units wide."></a-entity>
Note that if neither geometry nor text specify a width, the text width property will default to 1 unit (meter), and the geometry width property will then become 1 unit as well.
<a-entity
geometry="primitive: plane"
material="color: blue"
text="value: 1-wide\ndefault."></a-entity>
I am a new to AFRAME, I expect there will be a ring(or the cursor) being colored with green little by little when the cursor moves on someone entity, this action will notify how long time remaining to trigger the fuse. Can AFRAME do that?
Yes. Here is an example with scale:
https://aframe.io/docs/0.3.0/components/cursor.html#adding-visual-feedback
<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>
To do a circle, you can animation the circle's thetaLength rather than scale to make it draw a circle as it fuses.
<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="geometry.thetaLength"
fill="forwards" from="0" to="360"></a-animation>
</a-entity>