three.js fbxloader example 99% success - three.js

This example page https://threejs.org/examples/#webgl_loader_fbx shows a model bot dancing samba.
How can I get my hands on the model used by this page ?
I downloaded my own from mixamo.com and it gets loaded w/o problems, seems
to have all the animations and mixers, but I do not see the dancing bot character (the screen changes color to the colors of the bot once the scenes.add(object) is executed).
Am doing this with Angular6 and it really works very well with it.
Any help would be greatly appreciated.

The three.js FBX example models are hosted here: https://github.com/mrdoob/three.js/tree/dev/examples/models/fbx

Related

AudioAnalyser with three.js

https://glitch.com/edit/#!/pulseball?path=cube_audio_analyser2.0.html%3A1%3A0
I am trying to create an audio analyser in Three.js (see link above) also the sound file is in the assets. I am getting an error three.js:41273 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
So i have put in sound.resume() in the play function (see code) but i the error is still there i can click on the play and pause buttons and the track is played but i don't think the audio analyser is working. I have looked at the docs and some examples from Three.js and the web audio api copied the code from these sources but there is no reaction from the musical data to animate the cube. Could someone please help as I am sure what to do next.
thanks
Because of CORS restriction, it's not possible to load the audio file from glitch. I've slightly updated your code and use now an audio file from the official three.js repository. Check out how the frequency data are logged in the browser console.
https://orchid-iodized-action.glitch.me

Is it possible to apply animation for react-router-native?

I know that this question sounds like asking for suggestion which should not be here, But I am posting after searching a lot for my requirement.
I am using react-router-native for navigation which is great functionality wise. But comes to the animation part, it doesn't give the best user experience. Official Documentation doesn't seem like providing any animation information.
Even in the google I found some articles(A shallow dive into React Router v4 Animated Transitions, Animating Route Transitions with React Router) describing about animation for navigation but only for react.
Hence, Could anybody let me know that is there any way to apply animation for react-router-native?
The standard place to start is exploring basic Animations. That said - have a look at one of the more developed transition libraries out there e.g. react-native-transition.
If it's specifically for just routing then there is a great answer Here.
You might want to try this animation library for react-router-native:
react-router-native-stack
I think you need react-router-native-animate-stackreact-router-native-animate-stack
yarn add react-router-native-animate-stack
This is by default swipeable and you can customize the transition when move to next page.
Screencast
This is the package example running on expo snack
example

Angular 4 image marker

I'm currently working in an Angular 4 app which has to display an image in which anyone could mark a point and add a text, I've seen a lot of Jquery Plugins that do the work, but I don't like the idea of combining Jquery and Angular, anyone knows about an angular component that works for generic pictures?
A quick google search, brought up this tool, which seems to have the functionality you want, though may be a bit overkill. I haven't used it myself, so I have no idea how well it works: https://www.npmjs.com/package/ng2-photo-editor
Alternatively, using the canvas API isn't too difficult for something as simple as overlaying text and marking some points. This tutorial seems to go through some of the basics: https://objectpartners.com/2016/09/22/using-the-canvas-api-in-angular2/

Flickering when using neon-animated-pages with Polymer

I searched for this the solution a lot but I couldn't find any post describing the same "flickering" problem.
You can see a GIF here
Situation
I have a website with a menu, using app-route as in Polymer Starterkit but enhanced with neon-animated-pages.
If you use the menu (Start, My Card, My Dashboard) there is a smooth transition.
Problem
Go to "My Card" and click the enhance card arrow down (tooltip "more info") at the first card.
Now use the menus again and the page transitions are now flickering, as soon as the animation finished. It is like all object are quickly moving somewhere and then back to the position where they should be.
What I have tried
I tried to change CSS, as it seems to "re-align" the objects on the page.
Also I had this problem before when I used javascript to route to another page, but using "a href..." for app-route (as in polymer starterkit), this problem disappeared again.
Anyone have any idea what this can be?
I checked with Chrome, Firefox and IE, seems to be the same everywhere.
Thanks very much for your help!
Kind regards,
Huebiii
Found two more sources on github with the same issue and solutions.
Apparently only slide left/right animation are affected. Using a different animation should help.
Set Element.prototype.animate = null before loading the polyfill.
Flicker after slide animation in neon-animated-pages in Chrome
web-animations-next-lite flicker #86

Firefox pushes table content up one pixel

I'm pulling my hair out over this probably very simple problem..
I just built a website for an iphone repair company:
http://www.cellcity.co.nz/
When viewed on google chrome and safari the website shows up without any problems,
when viewed on internet explorer i just have the mobile optimised version showing while i get around to sorting out its problems.
but on firefox all my elements are pushed up one pixel. I have all the content within a table within divs, have a quick look at my source code or request some code to be shown. I don't understand what could be wrong, I am using the border-collapse css style, maybe that might be a contributing factor?
Thanks in advance,
Matt
Ok I figured out that for every css class and id, you can make a firefox independant one that is only seen by firefox. Just place #-moz-document url-prefix() {.....} around the second version of your css class and firefox will override the old version =D
hopefully this helps someone else!

Resources