Search code examples
htmlcssbabylonjs

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

i want to show text behind a babylon.js scene. I've made the background transparent but i can't see the text behind it. I've also tried z-index:-1 for the text.

I've only been learning Babylon since last night so I'm really not too sure whats going on. I'm also not good at java Script so any help would be greatly appreciated :)

     \\\\\<!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>

\\

Solution

  • The main issue here is setting background color to '*' elements, which prevents the image to be shown. When removing it (and adding it only to body), the h1s (with the negative z index) are shown behind the babylon scene:

    demo scene

    Note that I didn't use your model, but the default babylon scene, as i have no access to it.

    There is no need to set the canvas' background color to be transparent, the scene.clearColor parameter is doing it for you.