Zim Three z-index question

Questions
1

I set threeSpace a zIndex in web app,no problem.

three zIndex problem
three zIndex problem648×511 16 KB

but when I add a line code app break

var textureActives = new TextureActives([], THREE, threeSpace, threeSpace.renderer,threeSpace.scene,threeSpace.camera,null, null);

three zIndex problem bug

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <meta name="force-rendering" content="webkit">


    <title>test three zIndex</title>
    <script type="module">
        import zim from "https://zimjs.org/cdn/015/zim_three.js";
        import physics from "https://zimjs.org/cdn/015/zim_physics.js";
        // HTML message overlay
        const note = document.createElement("div");
        var cssText = `
                       opacity:80%;width:100%;height:5%;
                                        font-size:20px; color:#fff; 
                                        text-align:center;vertical-align: middle; 
                                        font-family:verdana; position:absolute;
                                        top:0px;bottom:0px;left:0px;right:0px;
                                        margin:auto;
                                        background-color:#f33a;z-index:1000;
                                    `;
        note.setAttribute("onmouseover", "this.style.backgroundColor='green';");
        note.setAttribute("onmouseout", "this.style.backgroundColor='#f33a';");
        note.setAttribute("style", cssText);
        document.body.append(note);

        note.innerHTML = `start`;
        note.onclick = function () {
            if (frame01) frame01.dispose();
            if(frame02)frame02.dispose();
            var event = new Event("build");
            window.dispatchEvent(event);
        };
        window.addEventListener(
            "build",
            (e) => {
                frame01 = new Frame('fit', 1024, 768, light.toAlpha(.4), dark, readyTest01, 'canvas.jpg', 'assets/test01/');
            },
            false
        );
        var frame01,frame02    
        function readyTest01(F, S) {
            new Circle(150,clear,blue,10).center()
            frame02=new Frame(FIT, 800, 760, orange, null, readyTest02);
            function readyTest02(bgF, bgS) {
                bgF.canvas.style.zIndex = -20;
                var tag = new Tag({ width: 300, height: 400, backgroundColor: "#f00a" }).center(bgS).mov(-300, -50);
                var threeSpace = new Three({
                    frame:bgF,
                    width: 200,
                    height: 400,
                    color: 0x0000ff,
                    cameraPosition: new THREE.Vector3(0, 0, 250)
                });

                var canvas = threeSpace.canvas
                var elm = threeSpace.DOMElement
                threeSpace.canvas.style.zIndex=-10
                //var textureActives = new TextureActives([], THREE, threeSpace, threeSpace.renderer,threeSpace.scene,threeSpace.camera,null, null);
            }

        } //end bgF_Ready function


    </script>

    <style>
        body {
            margin: 0px;
        }
    </style>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

<body></body>

</html>
2

This is as expected and not related to z-index. When you add TextureActives, everything in the ZIM frame is hidden. The only things that will be seen are TextureActive objects - and those will be shown on the three.js materials when set properly.

You can then see the ZIM frame by pressing the T key. So if you press the T key then you see the circle again. But, you should not have anything on the stage other than TextureActive objects. TextureActive is a system to display ZIM objects on three.js materials. Not a system to show ZIM in general. That is when you do not use TextureActives and the three.js is overlayed on ZIM.