Текст не будет отображаться поверх Вавилона. js - PullRequest
Новая
       108

Текст не будет отображаться поверх Вавилона. js

0 голосов
/ 17 июня 2020

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

window.addEventListener('DOMContentLoaded', function(){
            var canvas = document.getElementById('renderCanvas');
            var engine = new BABYLON.Engine(canvas, true);
            var createScene = function(){
                var scene = new BABYLON.Scene(engine);
                var camera = new BABYLON.UniversalCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
                camera.setTarget(BABYLON.Vector3.Zero());
                camera.attachControl(canvas, true);


                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);


                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
                sphere.position.y = 1;


                var ground = BABYLON.Mesh.CreateGround('ground1', 100, 100, 100, scene);


                scene.gravity = new BABYLON.Vector3(0, -9.81, 0);


                camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);
                scene.collisionsEnabled = true;
                camera.checkCollisions = true;
                ground.checkCollisions = true;
                sphere.checkCollisions = true;
                camera.applyGravity = true;


            }
            var scene = createScene();


            engine.runRenderLoop(function(){
                scene.render();
            });


            window.addEventListener('resize', function(){
                engine.resize();
            });
        });

        var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "67px Arial";
ctx.fillText("TEST", 10, 50);

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Ответ: Использование HTML как способа отображения текста в JS оказывается немного избыточным. При дальнейшем изучении документации Babylon. js я обнаружил, что библиотека Babylon JS имеет встроенный элемент GUI, который можно использовать для отображения текста без HTML или других JS вообще. Вот ссылка на то, где вы можете найти это, если пытаетесь сделать то же самое.

0 голосов
/ 18 июня 2020

Попробуйте следующее: 

engine.runRenderLoop(function(){
    scene.render();
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "67px Arial";
    ctx.fillText("TEST", 10, 50);
});

Я не знаю Вавилона, но предполагаю, что runRenderLoop - это рендер l oop, ie. он визуализирует сцену снова и снова (с любой выбранной частотой кадров). Это будет означать, что как только ваш текст будет нарисован поверх сцены Вавилона, сцена Вавилона визуализирует следующий кадр и нанесет aws поверх вашего текста.

...