javascriptbabylonjs

BabylonJs scene background image


I have quite new to BabylonJs and im currently Learning by doing.

I am trying to insert an image as the background for my scene:

enter image description here

However ive looked all over the internet and no where is it described how i insert an image as a background?

if needed here is my code:

    // 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() {
}

using the below codeenter image description here:


Solution

  • Try adding below code just before 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;
    

    UPDATE

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

    Generate heightmap for above image. (I'm not sure if it can be done for this image or not, but worth a try). You could check for any softwares or something to create height map of an image.

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

    let me know if it works. I have not tried it with height map yet. Could not access any softwares so not sure if height map can be generated from image above. But You could try. :)