Resize image displayed on BabylonJS

Questions
1

Hello everyone,

I just come into a project with BabylonJS and I don’t understand how everything works and if it’s done in the good way or not.
My question is : Is it possible to resize an Image which is displayed with BabylonJS ?
This is the function that should display the image.

(It displays an icone with a text above, when I put my mouse on it, the image is displayed with a close button)

Thanks,
Best regards,

addImage(i) {
	this.hotspotGUI[i] = new BABYLON.Mesh.CreatePlane("hyperlinkGui", data.Story.scenes[this.id].hotspot[i].geometry.options.size, this.scene);
	this.hotspot[i] = new BABYLON.Mesh.CreateDisc("Hyperlink", data.Story.scenes[this.id].hotspot[i].geometry.options.radius, 60, this.scene, false, BABYLON.Mesh.DOUBLESIDE)

	this.hotspot[i].position = new BABYLON.Vector3(data.Story.scenes[this.id].hotspot[i].transform.position.x, data.Story.scenes[this.id].hotspot[i].transform.position.y, data.Story.scenes[this.id].hotspot[i].transform.position.z)
	this.hotspotGUI[i].position = this.hotspot[i].position.add(this.hotspot[i].position.subtract(camera.position).normalize().scale(0.5));

	this.matImage[i] = new BABYLON.StandardMaterial(this.scene);
	this.matImage[i].diffuseTexture = new BABYLON.Texture(data.Story.scenes[this.id].hotspot[i].event.url, this.scene, true, false);
	this.matImage[i].diffuseTexture.hasAlpha = true;
	this.matImage[i].backFaceCulling = false;
	this.hotspot[i].material = this.matImage[i];

	this.matImageDisplay[i] = new BABYLON.StandardMaterial(this.scene);
	this.matImageDisplay[i].diffuseTexture = new BABYLON.Texture(data.Story.scenes[this.id].hotspot[i].event.url, this.scene, true, true);
	this.matImageDisplay[i].diffuseTexture.hasAlpha = true;
	this.matImageDisplay[i].backFaceCulling = false;

	this.plan[i] = BABYLON.Mesh.CreatePlane("Image", 4);
	this.plan[i].parent = this.hotspot[i];
	this.plan[i].position = new BABYLON.Vector3(0, 2.5, 0)
	this.plan[i].scaling.x = 1920 / 1080;
	this.plan[i].material = this.matImageDisplay[i];
	this.plan[i].isVisible = false;

	this.close[i] = new BABYLON.Mesh.CreatePlane("closeVideo", 2, this.scene);
	this.close[i].parent = this.hotspot[i];
	this.close[i].isVisible = false;
	this.close[i].scaling.x = 0.6;
	this.close[i].scaling.y = 0.6;
	this.close[i].material = this.matClose;
	this.advancedTexture[i] = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(this.hotspotGUI[i]);

	this.rect[i] = new BABYLON.GUI.Rectangle();
	this.rect[i].width = 1;
	this.rect[i].height = "200px";
	this.rect[i].cornerRadius = 90;
	this.rect[i].thickness = 2;
	this.rect[i].background = "#6D2077";
	this.rect[i].top = "-350px";
	this.rect[i].isVisible = false;
	this.advancedTexture[i].addControl(this.rect[i]);

	this.label[i] = new BABYLON.GUI.TextBlock();
	this.label[i].text = formatString(data.Story.scenes[this.id].hotspot[i].name);
	this.label[i].fontSize = "110";
	this.label[i].color = "white";
	this.rect[i].addControl(this.label[i]);
}
2

Welcome aboard!

You should put your code in a repro Playground (https://playground.babylonjs.com/), it will be easier for people to help you.

3

Hello,

There are more than 2k lines of code, hard to make something which will work on this…
But I understand !

4

So:

Yes :slight_smile:

It seems you put your picture on a plane, so changing the scaling of the plane should do it?

5

This choice is good or not?
Or should I remove the plane to do something better ?

Thanks for your answer,

6

Using the scale of the plane is fine.