I’m making a prototype to sync some of the texture data from sharepoint to be the textures of the materials. I got struck at using for-loop condition to assign the sliders to change scales of the textures respectively. Rather than changing texture scales of the materials assigned on spheres respectively, the sliders only changing texture scales of the last material(the one which assigns on the last sphere). How can I fix it?
here is my code in playground:
https://www.babylonjs-playground.com/#BIL9IP#1
You always call only slider2 onValueChangedObservable, (the last one in the cycle), see console messages; any slider will change only pbr2 material.
What is happening is beauty of Javascript lol
The fix is here : https://www.babylonjs-playground.com/#BIL9IP#4 a simple change from var to let on line 46 and yes scoping is a bi…
This is an amazing thread explaining the diff way better than I can possibly do : javascript - What's the difference between using "let" and "var"? - Stack Overflow
5 Likes
I have another question. Kinda related to the question above so I ask it here
I tried to use jQuery to do the same thing(assign the sliders to respectively change scales of the texture), but this time the texture’s source itself is a drag and drop data. How can I do it? Here is some codes from my scripts.
var ar = data.split("\n");
var topArray = [];
var divide = ar.length % 3;
for (i = 1; i < ar.length; i++) {
var img = document.createElement("img");
img.id = "img" + i;
img.width = "100";
img.draggable = "true";
img.ondragstart = "drag(event)";
img.src = "https://bigbetchannel.com/~kayla/test/Fabric/" + ar[i - 1];
ar.splice(ar.length);
pbr_list.push(img.src);
if (i % 1) {
for (j = 1; j < divide; j++) {
var topArr = j * 120 + 300;
topArray.push(topArr.toString());
img.style.cssText = "position:fixed; z-index: 10000;right:640px;top:" + topArray[i] + "px";
}
} else if (i % 2) {
for (j = 2; j < divide; j++) {
var topArr = j * 120 + 420;
topArray.push(topArr.toString());
img.style.cssText = "position:fixed; z-index: 10000;right:520px;top:" + topArray[i] + "px";
}
} else if (i % 3) {
for (j = 3; j < divide; j++) {
var topArr = j * 120 + 540;
topArray.push(topArr.toString());
img.style.cssText = "position:fixed; z-index: 10000;right:400px;top:" + topArray[i] + "px";
}
}
var main_display = document.getElementById("imgDisplay");
main_display.appendChild(img);
let slider = document.createElement("input");
slider.type = "range";
slider.id = ar[i - 1];
slider.value = "1";
slider.min = "1";
slider.max = "100";
var parent_display = document.getElementById("sliderDisplay");
parent_display.appendChild(slider);
console.log(slider);
main_display.ondrop = "drop(event)";
var startdrag = function drag(evt) {
evt.dataTransfer.setData("text2", evt.target.src);
}
img.addEventListener("dragstart", startdrag, false);
var dragover = function allowdrag(evt) {
evt.preventDefault();
}
var drop = function drop(evt) {
evt.preventDefault();
var srce = evt.dataTransfer.getData("text2");
if (evt.target.getAttribute("data-drop") == srce)
evt.target.appendChild(document.getElementById(srce))
var pickResult2 = scene.pick(evt.offsetX, evt.offsetY);
if (pickResult2.hit) {
let pbr_mat = new BABYLON.PBRMaterial("pbr_mat" + i, scene);
var texture = new BABYLON.Texture(srce, scene, false, true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
var nrmtexture = new BABYLON.Texture("https://bigbetchannel.com/~kayla/test/Fabric/" + input + "_nrm.jpg", scene, false, true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
pbr_mat.albedoTexture = texture;
pbr_mat.bumpTexture = nrmtexture;
pbr_mat.bumpTexture.uScale = 2;
pbr_mat.bumpTexture.vScale = 2;
//var roughtexture = new BABYLON.Texture("https://bigbetchannel.com/~kayla/test/Fabric/" + input + "_rough.jpg", scene, false, true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
//pbr_mat.metallicRoughnessTexture = roughtexture;
//pbr_mat.metallicRoughnessTexture.uScale = 2;
//pbr_mat.metallicRoughnessTexture.vScale = 2;
pbr_mat.metallic = 0; //temp
pbr_mat.roughness = 1; //temp
pickResult2.pickedMesh.material = pbr_mat;
slider.onchange = function() {
if (srce == "https://bigbetchannel.com/~kayla/test/Fabric/" + this.id) {
var scale = this.value;
console.log(scale);
console.log(this.id);
pbr_mat.albedoTexture.uScale = scale;
pbr_mat.albedoTexture.vScale = scale;
}
}
}
}
Try replacing all your var by let first and if it does not work a repro in the PG would be awesome 
2 Likes
it works now but the issues are more about the logic. I need to review the codes and re-think how to code it in a correct way. But thanks @sebavan for kindly help for this!
Depending on what you are trying to achieve your logic when using i % 1, i % 2 and i % 3 looks wrong to me.
i % 1 === 0 for all i and so is never true
i % 2 === 0 for all even i and so is ONLY true for odd i
i % 3 === 0 for all multiples of 3 and so is ONLY true for i = 3n + 1 and 3n + 2
It follows that in you logic i % 1 filters out no numbers and does nothing passing them onto i % 2; this filters out all even numbers and acts on odd numbers and passes on the even numbers to i % 3; this filters out even numbers that are multiples of 3, ie, 6, 12, 18… and acts on even numbers that are NOT multiples of three.
You have in effect
if (i % 1) {
acts on no numbers
} else if (i % 2) {
acts on 1, 3, 5, 7, 9 ............
} else if (i % 3) {
acts on, 2, 4, 8, 10, 14, 16, 20 .............
}
2 Likes
Thanks for pinpointing the css style issue. I will take a look and fix it soon. But the main issue I encounter is already resolved by my own. The if-else conditions are for telling the position of the imported images but not for iterating the number of the sliders. But thanks anyways, it helps to improve my coding style a lot.
That’s OK if you are happy that images “img6”, “img12”, “img18” etc for example are never positioned by the if…else
Actually I want to do my best as I can. The css style is the upcoming issue I would fix. Thanks for kindly help. If you dont mind, I would ask some questions regarding to that.
I do some simple prints on this playground. I guess I find out all the number if I am not wrong. https://playground.babylonjs.com/#S40SSA#1