Youtube videos on a mesh (port of CSS3DRenderer.js)

We built this Youtube video player to use in our virtual world Cryptovoxels. There are a few people asking about it in these forums so we made a playground so anyone here can use it. Its a port of CSS3DRenderer.js which was what three.js used.

@bnolan (founder of Cryptovoxels) also contributed to this code

https://playground.babylonjs.com/#1DX9UE#2

8 Likes

This is pretty fun :slight_smile:

You could use this to iframe anything, like the Babylon.js website for example https://playground.babylonjs.com/#1DX9UE#3

However, you can’t click on the iframe elements because the CSS objects are on a div that’s behind the canvas. You’d have to implement your own way of triggering items on the iframe

2 Likes

Could we not let the event bubbles in some ways ???

Maybe. I’d like to see if someone can get that happening. When I checked there was no easy way to pass a click to a div behind the canvas

Couple this with device orientation camera for more interasting results.

1 Like

Amazing! :smiley:

I haven’t been able to get one of my scenes to work yet, but I hope to make it work.
So while looking for information I found examples where it is possible to have control over the video or the website:
http://jeromeetienne.github.io/threex.htmlmixer/examples/demo.html#instagram



and
https://threejs.org/examples/css3d_youtube.html

I tried setting the CSS “pointer-events:none” on the canvas in @ozRocker demo, this CSS property is meant to “pass through” the clicks to the elements below, but it didn’t work for the iframe.

I thought it might be the case because of security concerns - you don’t want an evil website to put an iframe of some page (assuming a website mistakingly allows the page to be loaded from a frame) and then put a div on top of it, hiding what the user is really clicking, fooling the user into making evil actions.

But looking at the demo @Cstfan linked, it seems to me the only trick there is to set the pointer-events none on the canvas, and there it works fine. So, I guess there is no security concern, and I’m missing something here.

If any of you got the mouse clicks to pass to the iframe, please do share!

Tried exporting your playground to react without success. anyways I have refactored your playground to support HD resolution. And the fixed issue with multiple iframes

https://playground.babylonjs.com/#TGZ9GN#7

2 Likes

Very nice! It should work with React. The original code was actually built into a React application. I had to refactor to get it to work in the Babylon.js playground