r/diversions
1
0
Fork 0
Code Pull requests Releases Activity

plane size depends on image size (factor 100)

Browse source
This commit is contained in:
Ruben van de Ven 2020-06-19 17:50:50 +02:00
parent 1819b35404
commit c4ce456af0
1 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
parade.js
View file

@ -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: