I want to render an object having a large size in a small area of canvas how can I achieve that?
Currently facing issue to render the object in a small area if I enlarge the Canvas size its showing perfectly as in attached image.
But If I am reducing the size of the canvas it’s not showing the proper view of object
as in the attached image.
This is to be expected in 3D. In the following playground the sphere in the middle and the one on the right (sphere2) are the same size, sphere 2 is further away. The sphere on the left (sphere3) is smaller than the other two spheres but is the around the same distance from the camera as the middle sphere and higher than it.
When you are viewing the playground change the size of the browser, the scene looks the same as you alter the size of the browser. Is this what you are trying to achieve?
If so then this is achieved using
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
To see where to use it see
If it is not working in 3D Stack View there maybe a property of 3D Stack View that overrides it.
I have two objects of different sizes Object A is smaller and Object B is bigger if my camera position is the same for both A and B objects then they should visible at the same position, so what will be the position of the camera in which both objects looks fitted to screen
I believe you are mixing camera position, camera target and camera zoom. You have to mind the 3D environment. If you want a smaller object to fit in the camera view the same size as a larger object, you only have two choice:
Make both object the same size (by changing the scaling of one or the other)
Change the camera zoom on the target (and/or eventually position) depending on the object size.
Changing the size of the canvas or resizing the window won’t do anything. A smaller object will always look smaller than the bigger one, except for using one of the two methods above.