CODEWITHSUNDEEP
babylonjs
Ravi
Ravi

Reputation: 475

Show image using babylonjs

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

Upvotes: 4

Views: 4154

Answers (2)

Walter Laurent
Walter Laurent

Reputation: 9

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

Upvotes: 0

Darren Cook
Darren Cook

Reputation: 28913

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

Upvotes: 5

Related Questions