Scene 3D 70% and Scene 2D 30%

Daniel_B · June 26, 2022, 4:34pm

Hello,

How can i do the Scene 3D to be 70% width from the screen and the 2d screen to be 30% width from the screen. Like in the photo.

Thank you

Leonidas · June 26, 2022, 5:58pm

From what I gather you are using HTML/CSS for your UI right?

You will have to use some CSS on both containers to split them like that on scene. Here is an example using Flexbox:

yaustar · June 27, 2022, 9:47am

If the UI is rendered in PlayCanvas and not HTML the two routes I would consider are:

Use two cameras, one for the 3D scene and the other for the UI. Change the viewport rect to be the size you want to be on the screen: CameraComponent | PlayCanvas API Reference

Render the 3D scene to a texture and use an image element on the UI to show the scene to the user

Daniel_B · June 27, 2022, 10:19am

Thank You, @yaustar and @Leonidas, the question was for 2D UI but leonidas give me a Good ideea with html and CSS and i will try that.

Thank You very much!