We are creating an animated datavisualization.
We are trying to find out how to use objects to use as a clip mask a video below using three.js. It could be a sprite sheet animation if thats easier.
Here is an example video of the end result:
https://www.youtube.com/watch?v=TjyjqnPzDHA&feature=youtu.be
It must work in IE10, which seems to be a problem finding a solution.
Can someone share an example? Im kind of a newbie to three.js
Let me know if you have any questions.
Thanks in advanced!
David
Related
I wanted to know if it is possible to replicate this in Flutter, I know of the existence of Heroes but I know that they are only applicable with images.
What would be the best solution?
Example
Yes, this is replicable in Flutter.
Hero doesn't need to wrap only images you can experiment with any element for some really cool animation effects.
Consider reading this - https://flutter.dev/docs/development/ui/animations/hero-animations
Does anyone know a relatively easy implementation to get that split-screen stereoscopic VR view loaded with three.js? I've been searching all over the place and a lot of the implementations seem messy/confusing. If anyone has a good code example they could provide I would really appreciate it. Also, side note I'm trying to avoid using ES6 imports/exports
What’s wrong with using aframe and press VR button? If I misunderstood your question, please be more precise.
I have a question on a problem I've been struggling with.
I have been trying to figure out if the "bones" member in the Three.js JSON file format is supposed to be the bind pose of a skeleton?
I ask because, at the moment, I am exporting an avatar from DAZ Studio to Three.js, and that works fine. But as soon as I add the bones and animation everything is distorted. Basically, stretched out in the X and Y plane. I assume this is because I am exporting the "bones" and the "animation" members incorrectly. (Currently, I export the bind pose to the "bones" member).
The issue is that when I look for documentation on what is supposed to go into those fields, I can't really find anything. (Currently I just copied the format of the buffalo.js sample file on the three.js site). But obviously, I am outputting the bone translations, rotations and scales in the wrong coordinate space. Or maybe they should all be the bind pose??? I'm not sure... because I can't find anything to reference. I tried to use the blender exporter as a guide, but blender spaces and armatures are significantly different from what you find in DAZ Studio or Unity 3D.
If there is anyone out there who is familiar with the required coordinate spaces for values in the "bones" and "animation" members of the Three.js JSON file format, I would appreciate any guidance you could give me.
I am a bit too perplexed at the moment, and thought this might be a good time to "reset" and ask for a bit of guidance.
Thanx in advance to anyone who can help.
I know it's something with texture.needsUpdate() while rendering but I don't have a clue how to actually implement it. Maybe someone knows a link where I can see a working example or post some piece of code? Cheers.
An excellent question; I created some sample code to do exactly this -- using a spritesheet to do some 2D animation on a plane and on a cube, which requires regular updates. Here is a link to a documented example, that in particular contains a function to do exactly what you need.
http://stemkoski.github.com/Three.js/Texture-Animation.html
Hope it helps!
I am looking for some simple library for javascript to manage animations.
I need something realy simple, just to "parse" animation to frames. I want to handle everything by myself, i want just to know, how many frames is in animation and how to get the frame i want.
I did some digging on google, i found one which is realy nice (sprite.js) but it is too big and it will force me to rewrite my app.
Is there simple lib, or a tutorial how to work with animated images? (gif and others).
There is no straight way to get single frame from gif in JavaScript.