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;

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