BabylonJs场景背景图

Question

我对 BabylonJs 很陌生，目前正在边做边学。

我正在尝试插入一张图片作为场景的背景：

但是我在互联网上找遍了，但没有哪里描述了我如何插入图像作为背景？

如果需要，这是我的代码：

    // Global variables
var canvas, engine, scene, camera,assetsManger;

var CHATROOMS = [];

var CHATCLIENTS = [];
/*
 * Load the scene when the canvas is fully loaded
 */
document.addEventListener("DOMContentLoaded", function () {
    if (BABYLON.Engine.isSupported()) {
        initScene();
        initGame();
    }
}, false);

/**
 * Creates a new BABYLON Engine and initialize the scene
 */
function initScene() {
    // Get canvas
    canvas = document.getElementById("chatCanvas");

    // Create babylon engine
    engine = new BABYLON.Engine(canvas, true);

    // Create scene
    scene = new BABYLON.Scene(engine);

    assetsManger = new BABYLON.AssetsManager(scene);
    // Create the camera
    camera = new BABYLON.TargetCamera("camera", new BABYLON.Vector3(0,4,-10), scene);
    camera.setTarget(new BABYLON.Vector3(0,0,0));
    camera.attachControl(canvas);

    // Create light
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(0,5,-5), scene);
    engine.runRenderLoop(function () {
        scene.render();
    });
}
function initGame() {
}

使用下面的代码:

Answer 1

尝试在 engine.runRenderLoop(function () 之前添加以下代码。

var ground = BABYLON.Mesh.CreateGround("ground", 25, 25, 25, scene);
//Play around values 25 25 25 to fit to size of scene
var groundMaterial = new BABYLON.StandardMaterial("groundmat", scene);
groundMaterial.emissiveTexture = new BABYLON.Texture("URL_OF_IMAGE", scene);
groundMaterial.emissiveTexture.uScale = 1; //you could try changin this and below value to see replicated image 
groundMaterial.emissiveTexture.vScale = 1;
groundMaterial.emissiveTexture.level = 1; //It is kind of z-index
ground.material = groundMaterial;

更新

var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("URL_OF_IMAGE", scene);

为上图生成高度图。（我不确定是否可以为这张图片完成，但值得一试）。您可以检查任何软件或其他东西来创建图像的高度图。

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "URL_OF_HEIGHTMAP_IMAGE", 50, 50, 100, 0, 10, scene, false);
ground = groundMaterial;

让我知道它是否有效。我还没有用高度图尝试过。无法访问任何软件，因此不确定是否可以从上图生成高度图。但你可以试试。 :)

Answer 2

为了将来参考，您可以使用 Layer 实现此目的，允许您在构造函数中指定图像 URL 并将其作为背景。您还可以将纹理更新为您想要的任何内容（如视频）。

BabylonJs场景背景图

BabylonJs scene background image

javascript

babylonjs