diff --git a/parade.js b/parade.js index 71d90bc..32340e4 100644 --- a/parade.js +++ b/parade.js @@ -413,22 +413,33 @@ class ParadeImage { makeMesh(scene, config) { 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 img = new Image(); + let self = this; // use in callback + img.onload = function() { + // we preload the image, so we can create the plane based on image dimensions + // 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(); - var imageMat = new BABYLON.StandardMaterial("m", scene); - - imageMat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), scene); - imageMat.roughness = 1; - imageMat.emissiveColor = new BABYLON.Color3.White(); - imagePlane.material = imageMat; - imagePlane.parent = this.mesh; // text https://www.babylonjs-playground.com/#TMHF80 // TODO: cleanup this mess of the dynamic texture: