Convert 3D to 2D

Questions
1

I have a complex design (shelf ranges) working fine in 3D. The customer asked me to provide an option so that he can switch between 2D and 3D visualizations. How can I convert the 3D to 2D?

Thanks for any help

2

Depending of the need of your customer, maybe simply use ortographic cameras could do the trick :upside_down_face:

3

Thanks for your reply. I am currently using the orthographic camera but he needs something else for a realistic 2D.

4

We will need more explanations to be able to help you:

  • have you render reference to target?
  • do you want just an image to save or interactive 2D?
  • etc
5

Here is part of a code I use to create camera in TypeScript:

  this.camera = new TargetCamera('camera1', new Vector3(-6, 3, -3 ), scene);
  cameraZoom  = 3 
  this.camera.mode = Camera.ORTHOGRAPHIC_CAMERA;
  this.camera.orthoTop = cameraZoom / 2 ;
  this.camera.orthoBottom = -cameraZoom / 2;
  this.camera.orthoLeft = -cameraZoom ;
  this.camera.orthoRight = cameraZoom ;
  this.camera.setTarget(new Vector3(1, -0.65, 1));

   const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene);
   light.intensity = 0.98 ;

 // Point Light
   const pl = new PointLight('pl', new Vector3(0, 0, 0), scene);
  pl.intensity = 0.7;
  scene.registerBeforeRender(() => {
  pl.position = this.camera.position;
});

this.engine.runRenderLoop(() => {
scene.render();
}
);

Then I use the MeshBuilder.CreateBox, Mesh.CreateCylinder, MeshBuilder.CreateDashedLines, dynamicTexture.drawText and MeshBuilder.CreatePlane methods to create the objects of the scene. The resulted scene is added to the canvas element of the page. There is a slider for zooming which just changes the value of the cameraZoom variable and updates the scene. This scenario works fine but I am asked to support 2D.

6

Can someone help me in this issue? How to get 2D view in Babylonjs?

7

I’ve asked you few questions above.

8

Realistic is usually used with 3D. Technically, a 3D scene is also 2D, so you are going to have to explain what you are looking for.

As you already discovered, the orthographic camera mode is your friend. But the definition/specifications of what you need will have to come from you or your client. No one will be able to help without understanding what you mean with “2D”.

1 Like
9

RaananW beat me to it. I have no idea what you or your client understand by “realistic 2D”

2 Likes