Two scenes were created by babylon. In the first scene, add a ball and add a gizmoManager. In the second scene, add a cube and add a gizmoManager. You will find the gizmo of the two scenes, They can only be rendered in the first scene

Bugs
1

Repro
run the code

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Babylon.js Example</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<button id="toggleSceneButton">Toggle Scene</button>
<canvas id="renderCanvas" style="width: 100%;height:100%;"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);
    var scene1 = createScene1(engine);
    var scene2 = createScene2(engine)

    engine.runRenderLoop(function () {
        scene1.render();
    });

    window.addEventListener("resize", function () {
        engine.resize();
    });

    var currentScene = 1;
    var toggleSceneButton = document.getElementById("toggleSceneButton");
    toggleSceneButton.addEventListener("click", function () {
        if (currentScene === 1) {
            scene1.detachControl(canvas);
            scene2.attachControl(canvas, true);
            currentScene = 2;
            engine.stopRenderLoop();
            engine.runRenderLoop(function () {
                scene2.render();
            });
        } else {
            scene2.detachControl(canvas);
            scene1.attachControl(canvas, true);
            currentScene = 1;
            engine.stopRenderLoop();
            engine.runRenderLoop(function () {
                scene1.render();
            });
        }
    });

    function createScene1(engine) {
        var scene = new BABYLON.Scene(engine);
        var camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
        camera.attachControl(canvas, true);
        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", {diameter: 2}, scene);
        var gizmoManager = createGizmoManager(scene);
        gizmoManager.attachToMesh(sphere);
        return scene;
    }

    function createScene2(engine) {
        var scene = new BABYLON.Scene(engine);
        var camera = new BABYLON.ArcRotateCamera("camera2", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
        camera.attachControl(canvas, true);
        var box = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
        box.position = new BABYLON.Vector3(2, 2, 2);
        var gizmoManager = createGizmoManager(scene);
        gizmoManager.attachToMesh(box);
        return scene;
    }

    function createGizmoManager(scene) {
        const gizmoManager = new BABYLON.GizmoManager(scene);
        gizmoManager.positionGizmoEnabled = true;
        gizmoManager.rotationGizmoEnabled = true;
        gizmoManager.scaleGizmoEnabled = true;
        gizmoManager.gizmos.scaleGizmo.scaleRatio = 0.7;
        return gizmoManager;
    }
</script>
</body>
</html>
  • Expected result: the scene2’s gizmoManager need render in scene2.
  • Current result: the scene2’s gizmoManager render in scene1.

Screenshots
image

Desktop (please complete the following information):

  • OS: window10
  • Browser: chrome
  • Version: latest

Additional context
I use babylon 5.52.0, and the latest version will also have this problem.

2

You can try to constraint the gizmomanager camera in its utility layer to one particular camera. So, try to lock each gizmomanager to the active camera of the scene it’s attached to.

var utilLayer = new BABYLON.UtilityLayerRenderer(scene);
utilLayer.setRenderCamera(camera);
const gizmoManager = new BABYLON.GizmoManager(scene, 1, utilLayer);
3 Likes
3

@Cedric beat me to it, but I have a PG!

3 Likes
4

Thanks, you solved my problem.

1 Like