Zoom the camera to the plane

Hi Everyone and Happy New Year!

I wanted to create a scene where If I click on a plane the camera will zoom to the plane just enough to make it big (as by default planes would be small on load).

If I took only the position of the plane, it would look like the camera is inside the plane. Plus I can’t seem to get the proper distance that is needed.

I’ve created a simple playground that has on click on the plane:

I hope you can help me with this one :slight_smile:

1 Like

hey happy new year too


Hmmm for some weird reason I tried to apply it in our application, it seems to not work properly.
It’s still getting in front of the plane plus it is a bit down the actual screen.

Any idea what might be the cause. (unfortunately I can’t reproduce it in the playground as we used a database to load the data and all that other process…)

you check your camera type i use arcrotatecamera

Yep! I still used the arcrotatecamera.
I tried it like this:

window.addEventListener("dblclick", function (e) {
            console.log("scene.meshUnderPointer", scene.meshUnderPointer);
            if (scene.meshUnderPointer) {
                let mesh = scene.meshUnderPointer;
                this.allowControl = true;
                let canvas = scene.getEngine().getRenderingCanvas();
                var newCamera = new BABYLON.ArcRotateCamera("can", 3, 3, 3, camera.position, scene);
                newCamera.attachControl(canvas, true);
                //  newCamera.setPosition(camera.position);
                //  newCamera.radius = 1;
                newCamera.target.x = mesh.position.x;
                newCamera.target.y = mesh.position.y;
                newCamera.target.z = mesh.position.z;
                var bx = mesh._boundingInfo.boundingBox;
                // mesh.enableEdgesRendering();
                var mx =Math.max(Math.max(Math.max(Math.abs(bx.maximum.x),Math.abs(bx.minimum.x)),
                        Math.max(Math.abs(bx.maximum.y),Math.abs(bx.minimum.y)) ) ,
                newCamera.radius = 1. + mx * 3;
                newCamera.alpha = - mesh.rotation.y;
                newCamera.beta = 3.14159265 / 2. + mesh.rotation.x;}

you need define camera before your event defination
also try define the showMe function too and just use them in event click

Quick question, our current camera is a type of free camera. In this case, will it still work?
I also saw in the inspector that the target is being update but I think the position isnt updating. So I’ll also check on that :slight_smile:

Ok I think I’m a bit close. Following your advice I made a second camera (arc rotate type) on load and it looks like it passes the target value correctly but the rotation seems to be not updating. Upon checking it looks like we are using rotation quaternion (in the config of the planes). is it possible to convert this to just rotation or should I just use it as it is?

Edit: To give an example here is how we use to create the plane and get the position, rotation and scaling.

let decalTemp = BABYLON.MeshBuilder.CreateDecal("screen" + id, pickedMesh, { position: pickInfo.pickedPoint, normal: pickInfo.getNormal(true), size: new BABYLON.Vector3(1, 1, 1) });
                        var decal = BABYLON.MeshBuilder.CreatePlane("screen" + id, { height: 1, width: 1 }, scene);
                        let scale = BABYLON.Vector3.Zero();
                        let rotation = BABYLON.Quaternion.Identity();
                        let position = BABYLON.Vector3.Zero();
                        decalTemp.getWorldMatrix().decompose(scale, rotation, position);
                        decal.position = position;
                        decal.rotationQuaternion = rotation;
                        decal.scaling = scale;

Now the current thing that I am missing is the rotation to fix both the alpha and the beta.
I hope you can help me with this one :smiley: