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