Show image using babylonjs

Question

I am new to Babylonjs and i want to display/show image using BabylonJs and also i want to move the image using keyboard(like left arrow key, right arrow key, up arrow key, and down arrow key) with collision detection and i also want to disable all mouse events .

I have wrote below code for showing image but i think that is not right way..

  var playerMaterial = new BABYLON.StandardMaterial("ground", scene);
    playerMaterial.diffuseTexture = new BABYLON.Texture("/images/mail.png", scene);
    playerMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    player.material = playerMaterial;
    player.position.y = 1;
    player.position.x = -84;
    player.size = 20;

Can someone help me how to do (if you can share the source code that may help even better)?

Thanks
Raviranjan

score 5 · Answer 1 · answered Apr 07 '15 at 17:33

Your code looks basically right, assuming you also have a camera and light source. Here is a playground entry.

And, for posterity, here is that code:

var scene = new BABYLON.Scene(engine);

//Create a light
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene);

//Create an Arc Rotate Camera - aimed negative z this time
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, 1.0, 210, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

//Creation of a repeated textured material
var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene);
materialPlane.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
materialPlane.specularColor = new BABYLON.Color3(0, 0, 0);
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element

//Creation of a plane
var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
plane.rotation.x = Math.PI / 2;
plane.material = materialPlane;

I started with one of their demos, then hacked away most of the stuff to get the minimal example. I left in the backFaceCulling = false (as otherwise the image is only visible from one direction), and added in your specularColor setting.

An alternative approach is to replace the diffuseTexture with emissiveTexture:

materialPlane.emissiveTexture = new BABYLON.Texture("textures/grass.jpg", scene);

Then you can comment out the light, and it will still be visible. (In fact, if you leave the light pointing at it, it will be overexposed.)

(I would recommend starting a new question for your keyboard control and collision detection questions. Or work through the babylon samples and tutorial videos.)

score 0 · Answer 2 · answered Jul 21 '22 at 10:12

var playerMaterial = new BABYLON.StandardMaterial("ground", scene);
            playerMaterial.diffuseTexture=new BABYLON.Texture("./yourImage.png", scene);
            playerMaterial.bumpTexture=new BABYLON.Texture("./yourImage.png", scene);

i use that for parallax i help maybe

Show image using babylonjs

2 Answers2