babylon.js 具有透明背景的场景不会显示其背后的图像/文本 z-index

Question

我想在 babylon.js 场景后面显示文本。我已将背景设为透明，但看不到其背后的文字。我也试过 z-index:-1 作为文本。

我从昨晚开始才开始学习 Babylon，所以我真的不太确定发生了什么。我也不擅长 java 脚本，所以非常感谢任何帮助:)

     \\\<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BBY TIAL </title>
    <script src="https://cdn.babylonjs.com/babylon.max.js"></script>

    <style>
        *{
            background-color: pink;
        }

        #canvas {
            width:80%;
            height:80vh;
            z-index:10;
            border:0;
            padding:0;
            margin:0;
            background-color: transparent;
        }

        #maya{
            font-size: 300px;
            color:white;
            position: absolute;;
            background-color: transparent;
            z-index:-200;

        }
        #wright{
            font-size: 300px;
            color:white;
            position: fixed;
            z-index:1;
            top:50vh;
            left:40%;
            background-color: transparent;
        }
        #full{
            z-index: -9;
        }
    </style>
</head>
<body>
    <h1 id="maya">MAYA</h1>
    <h2 id="wright">WRIGHT</h2>
<canvas id="canvas"></canvas>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        var canvas = document.getElementById('canvas');

        var engine = new BABYLON.Engine(canvas, true,);
        engine.enableOfflineSupport = false; // Dont require a manifest file
        var createScene = function(){
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);


            var camera = new BABYLON.ArcRotateCamera("arcCam",
                    BABYLON.Tools.ToRadians(0),
                    BABYLON.Tools.ToRadians(0),
                    7.,BABYLON.Vector3.Zero(),scene);
            camera.attachControl(canvas,true);
            var light = new BABYLON.PointLight("PointLight",new BABYLON.Vector3(
            5,5,5),scene);
            light.parent = camera;
            light.intensity = 1000.5;

            BABYLON.SceneLoader.ImportMesh("","","ShippingContainer.babylon",
            scene,function(newMeshes) {
                newMeshes.forEach(function(mesh){
                    mesh.rotation = new BABYLON.Vector3(BABYLON.Tools.ToRadians(
                    0),0,0);
                }                );
            });

            return scene;
        }

        var scene = createScene();
        engine.runRenderLoop(function(){
            scene.render();
        });

    });
</script>

<h1 id="full">Maya<br/>Wright</h1>

<style>
    #canvas{
        background: transparent;
    }
    h1{
        background-color: transparent;
        font-size: large;
        top:5vh;
        left:40%;
        position: absolute;
    }

</style>

</body>
</html>

\\

Answer 1

这里的主要问题是将背景颜色设置为“*”元素，这会阻止显示图像。删除它（并将其仅添加到 body）时，h1s（具有负 z 索引）显示在巴比伦场景后面：

请注意，我没有使用您的模型，而是默认的巴比伦场景，因为我无法访问它。

不需要设置canvas'的背景色为透明，scene.clearColor参数帮你搞定

babylon.js 具有透明背景的场景不会显示其背后的图像/文本 z-index

babylon.js scene with transparent background won't show image/ text behind it z-index

html

css

babylonjs