Added THREE.js to emby webclient and it's amazing!

[chef 3745]

If this is intriguing anyone I can do a write-up on how to do it. Pretty straightforward. I would say it is a intermediate thing  to do to emby's webclient.

 

This is my login page now. 

 

If you want to see it in action you can check it out online, PM me an I'll give you the URL to the login page. I just want to spread the awesomeness of THREE.js in the emby UI, but can't post the URL here because Hackers suck.  

 

By the way, the red cloud of smoke is animated.  I wonder what kind pf cool stuff can be added to the emby UI with a 3D engine like THREE.js???... One can only try and see!  HINT: Probably a whole heck of a lot of cool stuff!

 

 

 

 

 

 

Edited September 11, 2019 by chef

[chef 3745]

Because, when viewing remotely, emby doesn't display the #userDiv at login, it is hard to show how this looks. I think I'll replace the code which stops the user Div from showing remotely.

 

I did find this really cool THREE.js library on GitHub, and I think it would make really cool transitions for the details page backdrops.

 

https://github.com/robin-dela/hover-effect/blob/master/src/hover-effect.js

 

I'll see what's it's like to implement it.

 

WebGL is hardware taxing, but it is just so cool to see in the Emby web client

[chef 3745]

Finally got some zindexing figured out for the login screen. Now that the manual login form is set to position relative, it is possible to z index it's position to the three.js canvas and place everything nicely on the screen.

 

I didn't realize that z-index will only work on elements that have position: absolute, relative or fixed.

[mickmik 0]

Hi, how to put js into webapp ? In CSS ?! 

[chef 3745]

No, I'll do a tutorial here. But whatever changes you make to js will probably be undone during an up date. So I'm working on a workaround to be able to add a single line to the webapp to install libraries and code.