There is anyway I can make a preview of the scene as a image in another div

Questions
1

What I want to do is show this scene as a preview in another div, without taking a screenshot.
I already try canvas.toDataURL() but it returns a black image (I suppose it return the environment).

Screenshot from 2021-05-20 20-00-34
Screenshot from 2021-05-20 20-00-341366×768 124 KB

2

For real time you may use 2 cameras with 2 viewports - MultiViews Part 2 | Babylon.js Documentation
Attach/detach cameras to canvas as you like to :slight_smile:

Another option is to use one engine with 2 canvas.

Or, if you want to use static preview image - Babylon screenshot function still is the simplest way.
Are there some obstacles which don’t let to use it?
(small example - Babylon.js SCREENSHOT MAKER Prototype )

2 Likes
3

I want to do as this example (Babylon.js SCREENSHOT MAKER Prototype) you show.

4

The code in the example is open, all at one page.
(could be better but it is just prototype :slight_smile:
Basically you’ll need the simple function:

takeScreenshot = function () {
                    BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, { width: 800, height: 450 }, function (data) {
                       document.getElementById("scrshotdiv").innerHTML = '<img src="' + data + '" style="width:100%;">';
                    });

to make a screenshot with given width and height (you may use canvas.width and canvas.height variables here) and write it as image source into specified div (or you can make it like CSS background or any other HTML way).

1 Like
5

I use this code and it returns a blank image too, like just the enviroment, without the object.
seems like the object still not loaded.

6

You may try to change BABYLON.Tools.CreateScreenshotUsingRenderTarget to BABYLON.Tools.CreateScreenshot
but better check if the scene is ready before.

7

But I made a button to take a screenshot, it still take the blank image.

thats my camera

let camera = new BABYLON.ArcRotateCamera(
            "Camera",
            Math.PI / 2,
            Math.PI / 2,
            2,
            BABYLON.Vector3.Zero(),
            scene
          );

 camera.upperBetaLimit = 1;
  camera.lowerBetaLimit = 1;

  camera.setTarget(BABYLON.Vector3.Zero());

  camera.attachControl(canvas, false);
  camera.detachControl();
8

You can try to enclose the call to the screenshot API in onEndFrameObservable:

takeScreenshot = function () {
    engine.onEndFrameObservable.addOnce(() => {
        BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, { width: 800, height: 450 }, function (data) {
            document.getElementById("scrshotdiv").innerHTML = '<img src="' + data + '" style="width:100%;">';
        });
    });
}
2 Likes