plane size depends on image size (factor 100)

This commit is contained in:
Ruben van de Ven 2020-06-19 17:50:50 +02:00
parent 1819b35404
commit c4ce456af0

View file

@ -413,22 +413,33 @@ class ParadeImage {
makeMesh(scene, config) { makeMesh(scene, config) {
this.mesh = new BABYLON.TransformNode(); this.mesh = new BABYLON.TransformNode();
var planeOptions = {
// TODO: should size be dynamic?
height: 5.4762,
width: 7.3967,
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
};
let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
var imageMat = new BABYLON.StandardMaterial("m", scene);
imageMat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene); var img = new Image();
imageMat.roughness = 1; let self = this; // use in callback
imageMat.emissiveColor = new BABYLON.Color3.White(); img.onload = function() {
imagePlane.material = imageMat; // we preload the image, so we can create the plane based on image dimensions
imagePlane.parent = this.mesh; // see https://www.html5gamedevs.com/topic/8917-textures-source-image-aspect-ratio/?do=findComment&comment=52949
var planeOptions = {
// TODO: should size be dynamic?
height: this.height/100,
width: this.width/100,
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
};
let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
var imageMat = new BABYLON.StandardMaterial("m", scene);
imageMat.diffuseTexture = new BABYLON.Texture(self.getImageUrl(), scene);
imageMat.roughness = 1;
imageMat.emissiveColor = new BABYLON.Color3.White();
imagePlane.material = imageMat;
imagePlane.parent = self.mesh;
}
img.src = this.getImageUrl();
// text https://www.babylonjs-playground.com/#TMHF80 // text https://www.babylonjs-playground.com/#TMHF80
// TODO: cleanup this mess of the dynamic texture: // TODO: cleanup this mess of the dynamic texture: