Вавилон. js сцена с прозрачным фоном не будет показывать изображение / текст за ней z-index - PullRequest
Новая
       61

Вавилон. js сцена с прозрачным фоном не будет показывать изображение / текст за ней z-index

1 голос
/ 06 апреля 2020

Я хочу показать текст позади вавилонской сцены. js. Я сделал фон прозрачным, но не вижу текст позади него. Я также попробовал z-index: -1 для текста.

Я изучаю Вавилон только с прошлой ночи, так что я не совсем уверен, что происходит. Я также не очень хорош в java Script, поэтому любая помощь будет принята с благодарностью:) 

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

\\

1 Ответ

0 голосов
/ 07 апреля 2020

Основной проблемой здесь является установка цвета фона для элементов *, что препятствует отображению изображения. При ее удалении (и добавлении только к body) h1s (с отрицательным индексом z) показываются за сценой вавилона:

demo scene

Обратите внимание, что я не использовал вашу модель, но сцену вавилона по умолчанию, так как у меня нет к ней доступа.

Нет необходимости устанавливать цвет фона холста, чтобы он был прозрачным, scene.clearColor параметр делает это для вас.

...