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

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

我从昨晚才开始学习巴比伦，所以我真的不太清楚发生了什么。我也不擅长 java 脚本，所以任何帮助将不胜感激:)

\\\\\<!DOCTYPE html>

<html>

<head>

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

<h2 id="wright">WRIGHT</h2>

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),

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;

慕婉清6462132

浏览 154回答 1

1回答

慕妹3146593

这里的主要问题是将背景颜色设置为“*”元素，这会阻止显示图像。当删除它（并且仅将其添加到body）时，h1s（具有负 z 索引）显示在巴比伦场景后面：请注意，我没有使用您的模型，而是使用默认的巴比伦场景，因为我无法访问它。无需将画布的背景颜色设置为透明， scene.clearColor 参数会为您完成此操作。

随时随地看视频慕课网APP