I have a 600x900 canvas on my webpage which has a 3D scene Inside. The part that can be viewed inside the canvas can be downloaded in the Image form.
Whenever I Click on Download Image Button a Dialog takes input of the Height and Width of the Image and then we can click Download to finally download the Image
There are, however 2 scenes initialized with one acting as a Heads-up Display. By default, I’m adding a
sceneHUD which will be the Heads-up Display.
The code of adding the plane looks like this
// img is an Image let plane = new THREE.Mesh(new THREE.PlaneGeometry(100, 100), img); plane.overdraw = true; plane.position.set(150,50,200); sceneHUD.add(plane);
Now this is the code that set-up the Image that needs to be downloaded:
camera.left = -cam_width / 2; camera.right = cam_width / 2; camera.top = cam_height; camera.bottom = 0; fitCameraToObject(object_list['bg']); renderer.setSize(req_image_width, req_image_height); renderer.domElement.style.width = dom_width + 'px'; renderer.domElement.style.height = dom_height + 'px'; renderer.render(scene, camera); renderer.render(sceneHUD, cameraHUD);
renderer.domElement is then assigned to the variable and then downloaded with the HUD on the bottom right.
The problem is, if the entered a different value for height or widhth, the HUD gets aligned at lower-right corner of image but it gets stretched horizontally and/or vertically depending on the dimensions.
How can this be resolved?