plane size depends on image size (factor 100)
This commit is contained in:
parent
1819b35404
commit
c4ce456af0
1 changed files with 25 additions and 14 deletions
39
parade.js
39
parade.js
|
@ -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 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
|
// text https://www.babylonjs-playground.com/#TMHF80
|
||||||
// TODO: cleanup this mess of the dynamic texture:
|
// TODO: cleanup this mess of the dynamic texture:
|
||||||
|
|
Loading…
Reference in a new issue