Jump to content


Photo

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


  • Please log in to reply
4 replies to this topic

#1 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 3855 posts
  • Local time: 09:25 AM
  • LocationPeterborough, Canada

Posted 09 September 2019 - 08:47 PM

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!

 

 

 

 

 

 

5d76f2027ec59_loginExample1.png


Edited by chef, 10 September 2019 - 08:49 PM.

  • CBers, Spaceboy, FrostByte and 2 others like this

#2 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 3855 posts
  • Local time: 09:25 AM
  • LocationPeterborough, Canada

Posted 10 September 2019 - 01:22 PM

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/r...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

#3 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 3855 posts
  • Local time: 09:25 AM
  • LocationPeterborough, Canada

Posted 10 September 2019 - 07:33 PM

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.

#4 mickmik OFFLINE  

mickmik

    Member

  • Members
  • 14 posts
  • Local time: 03:25 PM

Posted 15 September 2019 - 12:32 AM

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



#5 chef OFFLINE  

chef

    Advanced Member

  • Developers
  • 3855 posts
  • Local time: 09:25 AM
  • LocationPeterborough, Canada

Posted 15 September 2019 - 12:33 AM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users