I have a scene where I am importing a .glb file using ImportMesh. When user clicks on a mesh I am highlighting it with the ActionManager.OnPickTrigger event.
The task I am having trouble with is, I need an image or an image string that represents the highlighted mesh. I tried using ‘CreateScreenshotUsingRenderTargetAsync’ as follows
this gives me the screenshot of the entire canvas. Is there a way to only capture the mesh of interest? If not is there a way to crop the screenshot of the entire scene based on click point?
I don’t see an example that fits this exactly, but you basically need to create another camera using the normal way, as described in documentation, but don’t attach controls, and I think also add the camera to scene.activeCameras.
If you can create a playground with what you have so far, it will be easier to help.
I have created a second camera
var targetCamera = new ArcRotateCamera(“TargetCamera”, alpha, beta, radius, target, scene);
using same alpha, beta and radius as the first camera. target for the first camera is set to new Vector3(0, 0, 0);
where as for the second camera I did
targetCamera.setTarget(new Vector3(clickPoint.pointerX, clickPoint.pointerY, 0));
is this the correct way of getting the second camera to focus on the red section?
after that I am saying
scene.activeCamera = targetCamera;
const screenshotAsDataUrlPromised = new Promise((resolve: (value: string) => void) => {
scene.onAfterRenderObservable.addOnce(async () => {
const screenshot = await Tools.CreateScreenshotUsingRenderTargetAsync(
scene.getEngine(),
scene.activeCamera,
{
width: 200,
height: 150,
},
“image/png”,
8,
false
)
resolve(screenshot)
})
})
I must be doing something wrong as I am not seeing the correct area of interest. I tried setting viewport for the second camera but that still didn’t do what I want.
How do you get clickPoint? Do you use Action on pickable mesh, to get pickingInfo.pickedPoint? That would be a way or you can get pickedPoint like this:
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
Then use pickResult.pickedPoint as target.
Or you might want to check other possibilities like pickedMesh.position as target:
I didn’t use pickedPoint. I did this to get click point
SceneLoader.ImportMesh(“”, ${process.env.PUBLIC_URL}/models/, “MaleScene.glb”, scene, function (theMeshes) {
for (var i = 0, max = theMeshes.length; i < max; i++) {
theMeshes[i].actionManager!.registerAction(new ExecuteCodeAction(ActionManager.OnPickTrigger,
function (evt: any) {
clickPoint = evt;
}))
}}
and the snapshot captured was
which is not bad but it is still taking snapshot of the entire body. Is there a way I can get a zoomed in view only the surrounding regions of the selected mesh?
I tried zoomOnMesh as shown in the example but its not quite zooming properly. Here is a simple example that I modified to include zoom on scene pointer down. I am seeing a similar behavior in my project
Looks like the issue is that minZ is too high so your mesh is getting clipped. Here I used the same formula to set min and max z as CreateDefaultCamera() uses and it seems to be working well.
Thanks for that example. For me it didn’t work right away so I tried playing with the minZ and maxZ values.
When I switched to use ‘scene.createDefaultCameraOrLight(true, true, true);’ instead of ArcRotateCamera the values you provided for me. So I am able to zoom on mouse down which helps me take closer snapshots of target meshes.
Few questions:
Is there a way to reset the zoom back to original?
Is there a way to rotate the imported mesh? This is how it now looks on load