metadata shown underneeth image
This commit is contained in:
parent
67945cc32f
commit
1819b35404
1 changed files with 50 additions and 6 deletions
56
parade.js
56
parade.js
|
@ -8,6 +8,8 @@ var config = {
|
|||
shapeWidth: 100, // 8 shape of animation: width
|
||||
shapeHeight: 1300, // 8 shape of animation: height;
|
||||
playDuration: 16, // seconds. how long should audio play after dragging/pressing next. Something like audio duration / nr of images. Note that if everything is sorted interview will just continue;
|
||||
textColor: "orange",
|
||||
font: "bold 70px Arial",
|
||||
}
|
||||
|
||||
// polyfill
|
||||
|
@ -282,6 +284,12 @@ class Parade {
|
|||
this.changeSorterImage();
|
||||
}
|
||||
|
||||
reset() {
|
||||
// for use in terminal only. Quick way to test
|
||||
localStorage.clear();
|
||||
location.reload();
|
||||
}
|
||||
|
||||
play() {
|
||||
// play audio for n seconds:
|
||||
// extend timeout if it's already playing
|
||||
|
@ -369,7 +377,7 @@ class Parade {
|
|||
|
||||
for(let i in this.images) {
|
||||
// create the Meshes with the images in the scene
|
||||
this.images[i].makeMesh(this.scene);
|
||||
this.images[i].makeMesh(this.scene, this.config);
|
||||
}
|
||||
|
||||
|
||||
|
@ -403,7 +411,8 @@ class ParadeImage {
|
|||
this.target_position_time = time_complete;
|
||||
}
|
||||
|
||||
makeMesh(scene) {
|
||||
makeMesh(scene, config) {
|
||||
this.mesh = new BABYLON.TransformNode();
|
||||
var planeOptions = {
|
||||
// TODO: should size be dynamic?
|
||||
height: 5.4762,
|
||||
|
@ -411,14 +420,49 @@ class ParadeImage {
|
|||
sideOrientation: BABYLON.Mesh.DOUBLESIDE // texture should be visible from front and back
|
||||
};
|
||||
|
||||
this.mesh = BABYLON.MeshBuilder.CreatePlane("plane", planeOptions, scene);
|
||||
let imagePlane = BABYLON.MeshBuilder.CreatePlane("image", planeOptions, scene);
|
||||
|
||||
var mat = new BABYLON.StandardMaterial("m", scene);
|
||||
var imageMat = new BABYLON.StandardMaterial("m", scene);
|
||||
|
||||
mat.diffuseTexture = new BABYLON.Texture(this.getImageUrl(), 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:
|
||||
let text = this.info['image'];
|
||||
var temp = new BABYLON.DynamicTexture("DynamicTexture", 64, scene);
|
||||
var tmpctx = temp.getContext();
|
||||
let maxWidth = 1700; // at some point texture starts doing messy things.. let's avoid that by squeezing text.
|
||||
tmpctx.font = config['font'];
|
||||
var DTWidth = Math.min(tmpctx.measureText(text).width, maxWidth);
|
||||
var planeHeight = 3;
|
||||
var DTHeight = 256; //or set as wished
|
||||
var ratio = planeHeight/DTHeight;
|
||||
var planeWidth = DTWidth * ratio;
|
||||
|
||||
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:DTWidth, height:DTHeight}, scene, false);
|
||||
dynamicTexture.hasAlpha = true;
|
||||
var ctx = dynamicTexture.getContext();
|
||||
ctx.font = config['font'];
|
||||
ctx.fillStyle = config['textColor'];
|
||||
ctx.fillText(text, 0, 50, maxWidth);
|
||||
dynamicTexture.update();
|
||||
|
||||
var mat = new BABYLON.StandardMaterial("mat", scene);
|
||||
mat.diffuseTexture = dynamicTexture;
|
||||
mat.opacityTexture = dynamicTexture; // smoother transparency: https://www.html5gamedevs.com/topic/19647-quality-of-dynamictexture-text-with-transparent-background/?do=findComment&comment=111383
|
||||
mat.roughness = 1;
|
||||
mat.emissiveColor = new BABYLON.Color3.White();
|
||||
this.mesh.material = mat;
|
||||
|
||||
var textPlane = BABYLON.MeshBuilder.CreatePlane("text", {width:planeWidth, height:planeHeight, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
|
||||
textPlane.material = mat;
|
||||
textPlane.parent = this.mesh;
|
||||
textPlane.position.y = -4.3; // text sits below image
|
||||
|
||||
|
||||
|
||||
this.mesh.rotation.y = Math.PI; // rotate 180 deg. to avoid looking at backside from the start.
|
||||
|
||||
|
|
Loading…
Reference in a new issue