BabylonJs scene background image

Question

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:

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

pratikpawar · Accepted Answer · 2016-01-28T23:36:56.747

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. :)

Okay that works however the background seems to be in 2d which makes the ground look funny is ive posted it in my question — Marc Rasmussen, Jan 28 '16 at 22:52
oh so you want the image uploaded above as background? And then build your game with moving object with in it? — pratikpawar, Jan 28 '16 at 22:55
You might also look at Skybox in tutorials and create an environment similar to skybox with 3d images as wall inwards with capet as ground. 2 cents — pratikpawar, Jan 28 '16 at 23:41
@MarcRasmussen Did it work with heightmap? or 3d images skybox? — pratikpawar, Jan 29 '16 at 17:56

score -1 · Answer 2 · answered Nov 15 '21 at 17:00

-1

For future reference you can use Layer to achieve this, allowing you in the constructor to specify an image URL and have it as the background. You can also update the texture to whatever you want (like a video).

answered Nov 15 '21 at 17:00

ElDog

1,277
11
19

BabylonJs scene background image

2 Answers2