Show image with babylonjs
I am new to Babylonjs and I want to display / show an image using BabylonJs and also I want to move the image using the keyboard (e.g. left arrow keys, right arrow keys, up arrow keys and down arrow keys) with collision detection and i also want to disable all mouse events.
I wrote below code to show the image, but I think it is not.
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 anyone help me how to do this (if you can share the source code that might help even better)?
Thanks
Raviranjan
source to share
Your code looks mostly correct if you also have a camera and light source. Here is the playground entry .
And for posterity, here's this 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 my demos and then chopped off most of the material to get a minimal example. I left it in backFaceCulling = false
(since otherwise the image is only visible from one direction) and added to the setting specularColor
.
An alternative approach is to replace diffuseTexture
with emissiveTexture
:
materialPlane.emissiveTexture = new BABYLON.Texture("textures/grass.jpg", scene);
Then you can comment on the light and it will still be visible. (In fact, if you leave a light pointing at it, it will be overexposed.)
(I would recommend starting a new question on keyboard controls and conflict detection. Or working with Babylon samples and tutorial videos.)
source to share