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

Demos and projects
21

@withADoveInOneHand thanks for the suggestion!

Here’s an example with full interactivity: https://playground.babylonjs.com/#TGZ9GN#25

You click on the iframe to the bring it to the front (you can now interact with it normally), and click out of the iframe to send it back (you can now interact with the WebGL scene).

Hope this helps!

EDIT: if you implement proper mixing in three.js, you will get a similar result in that you need to click to focus and click out to defocus.

1 Like
22

That’s super cool, so much potential.

23

The only issue is that it changes z-ordering.

24

True, but seems like in BJS setting canvas pointer-events: none; doesn’t do anything, unlike three.js, so don’t think there’s any better solution at the moment. :expressionless:

25

could someone please guide what I am missing? I am not able to display video properly when using UniversalCamera https://www.babylonjs-playground.com/#YAWQ2W#10

26

@ozRocker any suggestion? found its CSS transform issue, somehow needs to calculate this for UniversalCamera ,
https://www.babylonjs-playground.com/#YAWQ2W#11

27

I’m sorry to say it, but, I tried this on the playground,
If you zoom in, only the iframe will become larger.

Do you know the solution to this?

1 Like
28

For some reason is stopped working properly on Chrome. This one should be fixed https://playground.babylonjs.com/#1DX9UE#93

Also works on Safari now.

2 Likes
29

Try this one, see if it works https://playground.babylonjs.com/#1DX9UE#93

1 Like
30

Same in my environment
It doesn’t work on Chorme.

It works on firefox and edge.

31

It works on my computer. I’m testing with Google Chrome Version 85.0.4183.102 (Official Build) (64-bit) on Windows 10 Home.

What version of Chrome and OS are you using?

32

私もGoogle Chromeバージョン：85.0.4183.102（Official Build）をWindows 10で使っています。

私は以下のページを見ていた
https://playground.babylonjs.com/#1DX9UE#2

ただこちらでは動いた
https://playground.babylonjs.com/#1DX9UE#92

I should have done this

230 //if (this.isIE) {
231    // IE will round numbers like 1e-005 to zero so we need to scale whole matrix up.
232    // Side-effect is reduced accuracy with CSS object mapping to Babylon.js object
233    objectMatrixWorld = objectMatrixWorld.scale(100)
234 //}
34

Make sure to test with the latest link
https://playground.babylonjs.com/#1DX9UE#93

2 Likes
35

I tried this with on my end, but it looks like there’s no visuals showing, just sound. Would this mean that there are some calls needs to be done?. like the CSS3DRenderer.render(scene,scene.activeCamera);?
I tried it with that but it still doesn’t work.

36

Hmmm, this just shows as a white box for me on both firefox and chrome.

37

hello looking at your work it works great in playground but downloading it and running it locally does not work. Is there any plugin or something i need to add to the html to make it serve me locally?

38

@Yeison_Vasquez The examples in PG have the line
let canvasZone = document.getElementById('canvasZone')
To run locally you need to create ‘canvasZone’ div in your HTML page.
This div belongs to PG and isn’t included in download.

2 Likes
39

Thanks a lot

40

I have a problem and it is that sometimes the video does not play automatically. Is there a way that touching the screen will play it back?

41

It should be possible to completely accept pointer events both in the scene as in the i-Frame, as can be achieved in ThreeJS:
See SpaceX example.