How to arrange the two models one on the left and the other on the right?

http://localhost:3001/#/home

There must be more to your question than how do you position models but it is too vague to answer.

Your image looks like a 2D canvas. Are you asking about placing images on a canvas or about 3D models?

It is not possible to link to a project on your local server.

If at all possible give a simplified version of the issue in the playground using a basic model.

1 Like

One of my canvases is loaded with two 3d models, I have a camera, but I don’t know how to place the two models on the left and right sides.

Do you mean

I have two models, L and R, and in what ever direction the camera is looking L will be on the left of the view and R will be on the right of the view?

What type of camera?

Is this PG a simplified example of what you need? https://playground.babylonjs.com/#L0IMUD#1

2 Likes

This could be a good starting point for you:

https://playground.babylonjs.com/#QLCPIY#1

EDIT: @JohnK you were faster :slight_smile:

2 Likes

@haoguang_shen so there are probably several approaches to do this. The simplest one is just pointing the camera at a specific point and moving the meshes to known locations in the scene. Another approach would be to leverage viewports, layer masks, and multiple camera to set up your scene.

Here’s an example: Layer mask/Viewport VS screen | Babylon.js Playground (babylonjs.com)

So in this scene, we create an initial camera. This camera will point to exactly where we need it to for the scene (my assumption is that you’d want to point it at a place so that the red and blue clouds appear on their respective sides of the screen).

Next, you’ll want to place your left model at some location and create another camera to target that model. Make sure to set the layer mask on all meshes and the camera to match (see lines 33 and 36 of the PG). You’ll also want to set up the left camera’s viewport so that it only takes up half of the screen:

// Viewport(x, y, width, height)
// Each must have a value from 0 to 1 (think percent of screen)
leftCam.viewport = new BABYLON.Viewport(0, 0, 0.5, 1);

You can repeat the same process with the right model as long as you use a different value for its layer mask.

Finally, when you create your background make sure to set it to have a layer mask that doesn’t have a value that overlaps either of the camera’s bit-wise values (eg. left has value of 0x20000000 and right has a value of 0x40000000 so background can’t have a layer mask of 0x30000000, 0x60000000, etc).

This is one approach I’d use that should also be friendly to resizing the canvas. It’s not the only way to do it so if you find an approach that works for you, feel free to post what works you.

Here’s some additional reading, if you’re interested:
Layer Masks and Multi-Cam Textures | Babylon.js Documentation (babylonjs.com)

3 Likes

thank you , i resolve it when i use your demo .

2 Likes

thanks for your reply :grinning:

2 Likes

The site looks pretty, can not wait to try it out :slight_smile:

Thank you ,This is my personal project, I will develop it as soon as possible in my spare time :stuck_out_tongue_winking_eye:

1 Like