Importing animation from MagicaVoxel to Aframe? - aframe

I have created a simple frame-based animation in MagicaVoxel(v.0.98) and can't work out how to import the model with its animation into aframe VR.
The aframe docs re using MagicaVoxel don't mention animation https://github.com/aframevr/aframe/blob/master/docs/guides/building-with-magicavoxel.md
When I look at the recommended animation-mixer component (https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders) it says that only glTF and three.js models support animation. glTF isn't one of the export options in MagicaVoxel but I'm not sure whether it would be possible to convert a MagicaVoxel export into that format.
Am I right in thinking that at present you can't create animations in MagicVoxel and import them along with your model into aframe? the above documentation points to that but doesn't say it explicitly. Likewise I haven't found documentation for MagicaVoxel that says clearly one way or the other.
Thanks in advance

MagicaVoxel cannot export to any formats that support animation, and in any case the type of animation it uses isn't a fit for typical formats that do support animation (via keyframes, morph targets, and skinning). You would need to export each frame of your animation as a separate OBJ and then import them all. You can use A-Frame's animation feature or some JavaScript to swap them out over time.
See: https://forum.sketchfab.com/t/how-to-export-an-animation-from-magicavoxel/15460/10

MagicaVoxel animations are rendered frame-by-frame stop-motion style animations, they don't actually create any real-time animations. You can use a second tool to try to add animation (e.g., Mixamo).

Related

Abandoned css linear transition function?

In MDN References for CSS transitions, there is a line in the grammar section referring to a transition that is named linear but takes arguments.
<linear-easing-function> =
linear( <linear-stop-list> )
But I could not find any documentation or example of using it anywhere online. Is it possible that it's just in CSS grammar, but it's not implemented in the engine for some reason?
It’s a draft, part of CSS Easing Functions Level 2. It’s only implemented in Firefox Nightly so far.

Bobril - keyframes rule

I am trying to make progress loader component in Bobril, but I do not know how to add keyframes rule. Is there any way how to handle keyframes in Bobril.
AFAIK there is no direct support for keyframes in bobril, but you can still use b.injectCss() to directly inject keyframes definition and then use it as usual in b.styleDef() or b.style().
PS: Because of the lack of direct support, you should ensure uniqueness of the keyframes name by your own means.

Using react; workflow method for overloading css

I am new to the React javascript framework and have a question about styling using CSS.
Using jQuery, my old workflow was to pick an element on the screen, inspect it in Chrome, note the selector/s that triggered the styling, change the element styling in the browser, and then save it to css/sass etc. If the widget had a hover-state I could make the element visible to see what it looked like.
However using React, and especially for components that someone else has coded, where the component does a 'pop-up' etc, I can't manipulate the DOM to see the component because it is removed from the DOM before I can inspect it.
Now of course I could read the external library code, work out how it works, but CSS inheritance means it would take some time to work out exactly is happening and this seems to be slower than what I was doing before - especially for a simple change.
So my question is, what is the preferred workflow for overloading the CSS for DOM elements that are removed before they can be inspected?

Using CSS animations in React.js

I've been working with React for a little while but animations is one thing that is confusing me.
Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.
My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?
Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?
You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.
The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.
CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.
So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.

Phaser using SASS Compass Sprites

I'm building a game using the Phaser javascript framework and want to use my compass-generated sprite classes from the SASS/CSS.
Can I use my generated classes on Phaser, and if so how would I go about doing this?
Since a Phaser game is one single <canvas> element, you can't use CSS to style specific game objects.
BUT, while I don't know much about SASS, maybe you can manage somehow to convert your sprite classes to base64 images ; if so it seems like you could import them with a game.cache.addImage('key', null, imageData);.

Resources