supermedium / superframe Goto Github PK

See https://aframe.io/docs/0.5.0/core/animations.html#fill

https://aframe.io/docs/0.5.0/core/animations.html#fill

Currently seems like there's no equivalent to fill property in the a-frame-animation-component documentation. I want to be able to tell the element to stick on the to value after doing the animation without hooking into events and doing overhead.

It seems like dir kind of replaces it? Is this how dir is intended to be used?

<a-entity text="text: SomeText; font: Droid Sans Mono; size: 0.7;"></a-entity>

new features ?!

<a-entity text="text: SomeText" font="Droid Sans Mono" size="0.7"></a-entity>

Is there some way to reverse an animation already played, like an imperative API?

Thanks!

Using https://github.com/aframevr/360-image-gallery-boilerplate
The alternate function after 3 clicks in 3.0.4 goes:
out-in => out-in => out-in
in >= 3.1.0 goes:
out-in => in-out => out-in

The difference in these versions is animejs 1.1.1 => 1.1.3. It may be a regression there, or with code interfacing with that lib.

First of all, thanks for all your work!

Code sample:

<a-box 
        position="0 1 -2"
        rotation="30 30 0"
        color="#87CEEB"
        roughness="0.8"
        scale="1 1 1"
        animation__mouseover="property: scale; startEvents: mouseenter; to: 1 2 1; dur:500"
        animation__mouseleave="property: scale; startEvents: mouseleave; to: 1 1 1; dur:500"
    >
</a-box>

Here there is no "from" attribute set and it seems like it's using the default scale value as "from".
In this case, the second animation jus not works as scale goes from "1 1 1" to "1 1 1".

I would expect the component to use the current scale value as "from".
Is it a normal behavior?

Thanks !

I'm trying to use browserify with browserify-shader:

browserify -t [ browserify-shader ] public/packages.js

or

browserify -t [ browserify-shader --parameterize=true ] public/packages.js

And that yields this error:

node_modules/aframe-sun-sky/shaders/vertex.glsl:1
varying vec3 vWorldPosition;
        ^
ParseError: Unexpected token

I'm using Browserify 13.1.1.

It looks like webpack might be the preferred packaging tool here, but I figure it would be good if this could work with browserify too since that's a fairly common tool.

I'm not sure if this is an issue with browserify-shader or vertex.glsl (I don't know much about glsl yet), so I also opened an issue with them mere/browserify-shader#7

Side note.... it would be great to add instructions for how to package this with browserify.

<a-entity scale="1 1 1" visible="true" animation="property: visible; dur: 1250; loop: true; to: false">

Should that code above animate visibility? If so then that aspect of this plugin may not be working.

I have obviously added a delay with 50000 milliseconds, which has no change...

I only notice the "delay" keyword once in the source code, and that is to define the schema. Is this just missing in the config or a future feature?

I'm having issues getting the circle layout to work properly with the look-at pointed to either camera or 0 0 0 . If I do just one or the other they work great, but the second I do both my items rotate in a weird way that I can't seem to fix.

I'm trying to align 12 portrait images in a circle with the camera in the middle, so when you look left/right there are more images, and I want all of the images to be facing the camera.

Not Working - Layout + Look At

With everything turned on, this is what I end up with. I can't figure out a way to get them to be oriented "standing up".

<a-scene>
  <a-assets></a-assets>
  <a-entity player-holder player-data layout="type: circle; radius: 6;" rotation="90 0 0"></a-entity>
  <a-sky color="#ECECEC"></a-sky>
  <a-entity position="0 0 0">
    <a-entity camera look-controls></a-entity>
  </a-entity>
</a-scene>

// loop within player-holder.init()
const entity = document.createElement('a-image');
entity.setAttribute('player', nameKey);
entity.setAttribute('material', `shader: flat; src: #${nameKey};`);
entity.setAttribute('rotation', '-90 0 0');
entity.setAttribute('look-at', '0 0 0');
// entity.setAttribute('position', `${position + (i * 1.5)} 0 -3`);
entity.setAttribute('width', 1);
entity.setAttribute('height', 3);

Working - Just Look-At

<a-scene>
  <a-assets></a-assets>
  <a-entity player-holder player-data></a-entity>
  <a-sky color="#ECECEC"></a-sky>
  <a-entity position="0 0 0">
    <a-entity camera look-controls></a-entity>
  </a-entity>
</a-scene>

const entity = document.createElement('a-image');
entity.setAttribute('player', nameKey);
entity.setAttribute('material', `shader: flat; src: #${nameKey};`);
// entity.setAttribute('rotation', '-90 0 0');
entity.setAttribute('look-at', '0 0 0');
entity.setAttribute('position', `${position + (i * 1.5)} 0 -3`);
entity.setAttribute('width', 1);
entity.setAttribute('height', 3);

Working - Just Layout

<a-scene>
  <a-assets></a-assets>
  <a-entity player-holder player-data layout="type: circle; radius: 6;" rotation="90 0 0"></a-entity>
  <a-sky color="#ECECEC"></a-sky>
  <a-entity position="0 0 0">
    <a-entity camera look-controls></a-entity>
  </a-entity>
</a-scene>

const entity = document.createElement('a-image');
entity.setAttribute('player', nameKey);
entity.setAttribute('material', `shader: flat; src: #${nameKey};`);
entity.setAttribute('rotation', '-90 0 0');
// entity.setAttribute('look-at', '0 0 0');
// entity.setAttribute('position', `${position + (i * 1.5)} 0 -3`);
entity.setAttribute('width', 1);
entity.setAttribute('height', 3);

I can change the "to" in animation.data.to. Then I call animation.update().

Sadly this stops the previous animation. It would be nice to be able to change the to in the middle and animate accordingly.

The template component triggers the following warning in A-Frame 0.5.0:

"core:propertyTypes:warn src property type is deprecated. Use asset instead."

Hi, I found that loading the aframe scripts after it's markup breaks the mouse event handlers completely.

Broken (jsfiddle)

Solution

load with vanilla look-controls, set 'reverse-look-controls', then remove 'look-controls'
jsfiddle

I am hoping to only have animations triggered based off of state. This will allow animations to be more "aware" and be able to easily tell a story. Not at all times does looking at a character do the same thing, sometimes it makes them run, sometimes it makes them talk based off of the state.

In the schema add the ability to write the required state for the animation to trigger. Then even if a separate component that controls state, with event-set.

Additionally if possible allow animation component to change the state at end of animation/at the beginning.

Unless you think there is a better way to do this? This would really expand the capability of AFrame imo.

This text component clashes with the new internal text component in A-Frame 0.5.0.

Including it via <script src="aframe-text-component.js"></script>
yields:

"Error: The component text has been already registered. Check that you are not loading two versions of the same component or two different components of the same name."

Greetings! WebVR newcomer trying to work through the A-Frame starter guide using Firefox 50.1.0, finally got down to text components which sent me here.

In running the example code under Browser Installation on https://www.npmjs.com/package/aframe-text-component over at https://twila27.github.io/vr/aframe/3dtext.html, it reports back that:

TypeError: _[t].toShapes is not a function[Learn More] --  aframe-text-component.min.js:1:2851
uncaught exception: The font #optimerBoldFont with normal weight and normal style is missing. -- (unknown)

Hope this helps!
Benjamin D. Gibson

Is there a way to look at an object in only one axis?
This would be useful for placing 2d people in an architectural scene that always faces the camera by rotating in just the y-axis.

Here's my component

<a-entity class="player-button" id="back-button"
  geometry="primitive: plane; height: 1; width: 1"
  position="0 0 0"
  material="shader: flat; src: #back; transparent: true;"
  animation__enter="property: scale; easing: linear; dir: forward; dur: 100; to: 1.2 1.2 1.2; startEvents: mouseenter;"
  animation__leave="property: scale; easing: linear; dir: forward; dur: 100; to: 1 1 1; startEvents: mouseleave;">
</a-entity>

animation__enter happens once and then never happens on subsequent mouseenter events. What's weird is that it does actually change the scale it just ceases to animate the change (pops into place).

Further more, after executing animation__enter, animation__leave never works. Once again, the values change on the event, but there's no animation.

It's very hard to see in this video http://recordit.co/qa9op6AeIc but what happens is that the initial enter animation works but then on mouseleave it breaks. Then I hover over the pause button and the same thing happens, enter works but all else fails from then on in -- meaning each component gets one chance to animate. Very weird.

I would expect the position attribute of the top level entity (the one with the layout component) to refer to the center of that entire entity. For example, I'm trying to make a menu that is slightly rotated along the y axis. I would expect the following code to result in all 5 planes nicely centered, but I don't get that:

<!-- Menu -->
<a-plane position="1 4 20" rotation="0 -15 0" scale="4 4" color="#2b2b2b" opacity="0.8"></a-plane>
<a-entity position="1 5 20.01" layout="type:line; margin:1.1" rotation="0 -15 0">
    <a-plane scale="1 .5" color="#fff" opacity="0.8"></a-plane>
    <a-plane scale="1 .5" color="#fff" opacity="0.8"></a-plane>
    <a-plane scale="1 .5" color="#fff" opacity="0.8"></a-plane>
</a-entity>
<a-plane position="1 3.5 20.01" rotation="0 -15 0" scale="3.2 2" color="#fff" opacity="0.8"></a-plane>

In order to get these aligned, I have to finagle the top level entity into place through trial and error:

<a-entity position="-.1 5 19.75" layout="type:line; margin:1.1" rotation="0 -15 0">

Even after messing with it for a while its still not perfectly centered, because I have to modify both the x and the z positions each time.

This may be more of a feature request than an issue, because there may be cases where you'd want the position to represent the center of the first child entity... it just makes more sense to me semantically the way I've described above.

Hi Kevin!

I really like your current set of audioanalyser tools, but I can only seem to get the visualizers to work if autoplay is enabled on the src audio.

I've tried all sorts of workarounds, but if anything other than autoplay triggers the audio, the visualizers don't function.

If I comment out the line that connects the audioContext to the destination, the audio (correctly) is not audible when triggered. That leads me to believe the audio is in fact getting routed through the audioContext, even if the visualizers aren't working.

Any ideas?

I'm using the latest stable build (0.4.0) and mainly testing on Chrome.

Maybe somehow setup Github hooks to publish them on each commit in master branch?

I'm referencing this Pen as a minimized test case for this issue.

If you set the top line (currently - var use_entity = false;) to:

- var use_entity = true;

This will cause a difference circle to render, and you'll notice the only difference between the two is the following lines:

- line 06: a-circle#circle-1(material='color: #F79F24;\
+ line 16: a-entity#circle-2(material='primitive: circle; color: #2eafac;\

It seems as if the animation component has trouble accessing the values of an entity, specifically in this case its geometry.

Uncaught (in promise) TypeError: Cannot read property 'type' of undefined
    at i (aframe-animation-component.min.js:1)
    at i.update (aframe-animation-component.min.js:1)
    at i.updateProperties (component.js:212)
    at i.module.exports.Component (component.js:37)
    at new i (component.js:330)
    at HTMLElement.value (a-entity.js:366)
    at HTMLElement.value (a-entity.js:517)
    at e (a-entity.js:490)
    at Array.forEach (<anonymous>)
    at HTMLElement.value (a-entity.js:472)

This isn't the worst bug, because the problem is solved by using a primitive whose geometry is declared by A-Frame, but this may pose problems in animating custom geometries using this component? (I'm unsure, going to test as I go along with my current project).

I'd like to assign arbitrary functions to events on entities, so I did this:

<a-entity event-set-function="evnt:click;fcn:logger"></a-entity>

AFRAME.registerComponent('event-set-function', {
  schema: {
    evnt: {type: 'string', default: ''},
    fcn: {type: 'string', default: ''}
  },
  init: function() {
    var evnt = this.data.evnt
    var fcn = this.data.fcn
    this.el.addEventListener(evnt, function() {
      if(window[fcn]) {
        window[fcn]()
      }
    })
  }
})

var logger = function() {
  console.log('It works!')
}

I'd like to know whether this is too naive of an approach or if I'm thinking of this the wrong way before I make a PR on the event-set component.

As far as I can tell from the code duration is only an integer. It would be nice to make it indefinite.

When requiring kframe with aframe already on the page (also tried k-frame). We tried 0.3.0 and 0.3.2-beta2.

Using Nightly 55.0a1 (2017-05-22) (64-bit) on Windows 10.

Is this conflicting with the built in aframe "text" component?

This throws an error in the spotify example, presumably because the element to be removed is not actually attached to the DOM, so el.parentNode is null.

I just recently started using aframe and I tried the tutorial using your animation instead of the native <a-animation> component. It was not that hard to accomplish, but some changes in the interface could make portability much easier.

Is there any specific reason why you use dir, property, loop instead of direction, attribute, repeat ? If not I would be happy to make a PR proposing changes

I am trying to implement the Firebase component to share elements between users.

Example. I have a box in a scene which has the firebase-broadcast attribute appended to it. When two people enter the scene, the element is then created for each user (looking at the code, this make sense). However I would like to have the second user utilize the same box asset data from the first user so, for instance, they could toss the same box back and fourth to each other.

Is this implementation possible with the current status of the component?

I'd like to use the template component on elements like this:

<a-entity id="parent" template="...">
    <a-entity id="child"></a-entity>
</a-entity>

However due to this code https://github.com/ngokevin/kframe/blob/master/components/template/index.js#L51 the #child element is removed when update gets triggered.

Also it seems oldData is always truthy because aframe passes an empty object on the first update call, so child elements even get deleted on load.

Maybe the template component could keep track of children created by itself, and only delete those? An option to just not remove children would work for my use case too.

In the meantime I'll just be using a forked version with those lines commented out in https://github.com/haydenjameslee/networked-aframe 0.2

TLDR: is there something like the firebase component but using localStorage/indexedDB and webrtc data channels?

Hello, low priority question since I'm sure you are extremely busy. Thank you for all of your amazing work on a-frame.

To me, a-frame seems to be the leader in terms of the technical foundation for the possibility of having a truly open metaverse. In that I mean building open systems from a-frame components that eventually compete to some degree with things like High Fidelity/Project Sansar or maybe Garry's Mod etc. in terms of social/user-built VR. I understand the project goals are not the same, its more like a-frame is a starting point for programmers.

This component, aframe-firebase-component, would play a key role in someone trying to recreate that type of shared VR experience or world. Along with a physics system. And some way to synchronize the physics and updates in general over clients. Which is the hardest part of all of it.

It makes practical sense to use Firebase. But in the ideal case, we would be able to use local storage and webRTC data channels to enable the same type of thing without relying on a central server/commercial service. Basically, the goal would be something similar to a High Fidelity domain (which is a server the uses UDP and handles syncing the VR environment/world that a specific user owns) but it runs entirely in a browser process (maybe SharedWorker etc.).

Do you know of any projects along those lines? Or are you basically having to do all of that yourself and so we are on making Firebase do basic stuff still. Thanks.

I am wondering if people are not even really seriously trying to do that inside of browsers and instead essentially building their own optimized browsers/3d graphics+browser bundles just on the basis of the assumption that they can't optimize across arbitrary browsers.

Adding entities to a layout appends them correctly.
Removing entities then adding entities though doesn't reallocate the empty slots. It might be difficult to keep track of them but into supporting it leads to, arguably, unexpected behavior :

Example http://jsbin.com/qadosi/edit?html,output

After npm installing this package, I appear to have gotten an outdated animejs.

I checked the package.json in my node_modules directory:

...
  "dependencies": {
    "animejs": "^1.1.0"
  },
...
  "version": "3.2.5"

This seems to be an error, as it doesn't match the source:

https://github.com/ngokevin/kframe/blob/master/components/animation/package.json#L35

I was hoping to use the custom bezier easing functionality of the more recent versions of anime. I'm not sure what went wrong here, does it need to be redeployed to npm? Even if I had the right version of anime, would it work? I tried a local edit to pull in anime "2.0.2" but had errors when running it.

I tried using the animation complete event

<a-entity id="plane" geometry="primitive: plane;width:0.5;height:0.5;depth:0.5;" animation="property: scale; from:0 0 0;to: 1 1 1;dur:3000;"></a-entity>

and then added an event listener

document.getElementById("cursor").addEventListener("animationcomplete", function(){ console.log("Animation Complete!"); });

using the events animationbegin or animationcomplete never fire off an event. The animation does work though. Is this a bug or should the events used in a different way?

Thanks

http://stackoverflow.com/questions/41683165/mozilla-aframe-a-frame-layout-component-does-not-reset-after-removechild

Works well on Dev build in local.

Fails completely on server upload.

Any leads for a solution?

Set an animation on, for instance, a-box with rotation: 0 360 0. Remove the animation with el.removeAttribute('animation') and add an animation, with setAttribute,to the same element with rotation: 360 0 0. This will result in a rotation: 360 360 0 when you see the scene.

It seems that removing the animation leaves some leftover from the properties set.

You can also, after removing the animation, add the same animation again with setAttribute. This will result in an animation with twice the duration.

line 51:
bug:
var isCoordinates = coordinates.isCoordinates;

correct:
var isCoordinates = coordinates.isCoordinate;

I have the following code:

<body style='margin : 0px; overflow: hidden;'>
    <a-scene physics="debug: true">
        <a-assets>
            <a-asset-item src="/models/mario/mario-sculpture.obj" id="mario-model"></a-asset-item>
            <a-asset-item src="/models/mario/mario-sculpture.mtl" id="mario-mtl"></a-asset-item>
        </a-assets>
        <a-camera id="player" look-controls wasd-controls="acceleration: 200">
            <a-cursor></a-cursor>
        </a-camera>
        <a-plane static-body material="color: green;" position="0 -3 0" width="30" height="30" rotation="-90 0 0"></a-plane>
        <a-entity look-at="#player" dynamic-body="shape: sphere; sphereRadius: 2.8; mass: 1" scale="0.05 0.05 0.05" position="0 0 -5" obj-model="obj: #mario-model; mtl: #mario-mtl"></a-entity>
    </a-scene>
</body>

but I have that error when the look-at component loads

Uncaught (in promise) TypeError: isCoordinates is not a function at Object.parse (http://127.0.0.1:8080/scripts/aframe-look-at.min.js:70:12) at i.parseAttrValueForCache (http://127.0.0.1:8080/scripts/aframe.min.js:244:2297) at i.updateCachedAttrValue (http://127.0.0.1:8080/scripts/aframe.min.js:244:2120) at i.updateProperties (http://127.0.0.1:8080/scripts/aframe.min.js:244:2627) at i.module.exports.Component (http://127.0.0.1:8080/scripts/aframe.min.js:244:1485) at new i (http://127.0.0.1:8080/scripts/aframe.min.js:244:4852) at HTMLElement.value (http://127.0.0.1:8080/scripts/aframe.min.js:236:4592) at HTMLElement.value (http://127.0.0.1:8080/scripts/aframe.min.js:236:5965) at e (http://127.0.0.1:8080/scripts/aframe.min.js:236:5464) at Array.forEach (native)

Any idea?

Using Aframe 0.5.0 and the reverse-look-controls component on Mobile Safari (iOS 10.3) results in a scene that can't be dragged and doesn't respond to device orientation.

CodePen: http://codepen.io/doughamlin/pen/PpgPxw

Getting lots of console errors which prevent the demos from running in 3d. Below is a log sample from the animation demos.

VRDisplay.getPose() is deprecated. Please use VRDisplay.getFrameData() instead.
build.js:34 VREyeParameters.fieldOfView is deprecated. Please use projection matrices provided by VRFrameData instead.
708build.js:34 submitFrame must be called within a VRDisplay.requestAnimationFrame callback.

I'm running Chrome webvr build, its the most recent or second most recent build available.

Thanks!
Matt

The line layout seems to be limited to X axis only. It would be nice to support line layout along Y and Z.

If I have elevation data for an array of lat/long points, Can I use this tool to create a terrain from that?

Would be cool.

Removing the animation component from an element should stop the animation. Currently it does not.

Code to reproduce: https://gist.github.com/i3games/8a9276e2673d29364c089f084049638b

I think it is due to to a wrong parameter is handed to anime.js.

(This might have been reported as #13).

Stackoverflow question: https://stackoverflow.com/questions/40667587/aframe-animation-component-not-removing

I have attempted a few ways to remove the animation:

element.components["animation__0"].remove(); //works, but has no affect on html list, just "stops" animation.
delete element.components.animation__0 //works, in theory but html attribute still there
$("#id").removeAttr("animation__0"); //results in the error below:

aframe-animation-component.js:468 Uncaught TypeError: Cannot read property '2' of null(…)
getUnit	@	aframe-animation-component.js:468
getValidValue	@	aframe-animation-component.js:523
getTweenValues	@	aframe-animation-component.js:584
(anonymous function)	@	aframe-animation-component.js:601
(anonymous function)	@	aframe-animation-component.js:594
getTweensProps	@	aframe-animation-component.js:592
getTweens	@	aframe-animation-component.js:614
createAnimation	@	aframe-animation-component.js:755
animation	@	aframe-animation-component.js:784
update	@	aframe-animation-component.js:128
updateProperties	@	component.js:211
value	@	a-entity.js:446
value	@	a-entity.js:607
attr	@	jquery.js?hash=22a0055…:8028
removeAttr	@	jquery.js?hash=22a0055…:8068
(anonymous function)	@	jquery.js?hash=22a0055…:7991
each	@	jquery.js?hash=22a0055…:442
each	@	jquery.js?hash=22a0055…:194
removeAttr	@	jquery.js?hash=22a0055…:7990
(anonymous function)	@	VM8102:1

events example under animations isn't working properly.
pauseEvents successfully fire the emit event to the object, but do not pause the animation.

Has anyone else gotten this error? Followed install instructions using browser files and I get nothing with this a.forEach error on line 129 of the firebase component script.

Uncaught TypeError: a.forEach is not a function
at https://unpkg.com/[email protected]/dist/aframe-firebase-component.min.js:1:2630
at Array.forEach (native)
at r.tick (https://unpkg.com/[email protected]/dist/aframe-firebase-component.min.js:1:2266)
at https://aframe.io/releases/0.3.0/aframe.min.js:149:5535
at Array.forEach (native)
at HTMLElement.value (https://aframe.io/releases/0.3.0/aframe.min.js:149:5499)
at HTMLElement.value (https://aframe.io/releases/0.3.0/aframe.min.js:149:5614)

juliangarnier/anime#20 (comment)

Rather than playing the animation, add a tick() handler to the component.

// ... 

this.myAnimation = anime({
  targets: '.particule',
  translateX: 100,
  autoplay: false
});

// ...

tick: function (time) {
  myAnimation.tick(time);
}

Using the animation component to animate the color of a mountain:

  <a-mountain color="#333433"
      animation__color="property: color; to: #33FF33; dir: alternate; dur: 5000; loop: true">
    </a-mountain>

... animates the color but also triggers a reconstruction of the mountain geometry.

It would be awesome if I could pick and choose modules to include in my project:

import * from 'kframe/text or import { 'text' } from 'kframe'

But this doesn't work with the current npm release because that only includes the dist directory.

Also, it would be great if the GitHub releases page listed releases:

https://github.com/ngokevin/kframe/releases