使用 THREEjs 加载纹理的提升问题答案

【问题标题】：hoisting issue using THREEjs loading textures使用 THREEjs 加载纹理的提升问题
【发布时间】：2021-03-08 08:41:17
【问题描述】：

我的问题在于这段代码（我会尽力解释）：

这段代码的 sn-p 在 for 循环中。我从 csv 文件加载图像文件列表并使用 lineBreak 进行解析。我使用这种技术可以轻松地将图像更新到我的网站。这一切都很好，但我想保留每个图像的纵横比。所以下面的代码用于检查每个图像的宽度和高度，并在我加载纹理时使用固定宽度设置每个平面几何的新高度。

texture[i] = new THREE.TextureLoader().load(lineBreak[i],function(tex){
  thumbHeight = Math.ceil( (tex.image.height / tex.image.width) * thumbWidth); //here I calculate the new image/texture/thumbnail height
picH = thumbHeight; }); //both picH and thumbHeight are declared as global variables

// 下面这行代码就是问题所在。它被提升到前一个函数之上，并且 thumbHeight 被初始化为未定义。如果我把它放在函数中，它什么也不会产生（没有错误）。在函数内使用 console.log 会显示所有正确的结果，但在函数外，thumbHeight 是未定义的。

mesh = new THREE.PlaneGeometry(thumbWidth, thumbHeight);

您可能已经猜到我是 Javascript 和threejs 的新手，您是对的。我正在尝试重新创建我多年前在 Flash actionscript 中创建的网站。任何想法或建议将不胜感激。谢谢

【问题讨论】：

好吧，我想通了。
我需要在 for 循环之前创建平面几何，并在我的纹理函数中进行更多数学运算，然后缩放网格。如下所列：
texture[i] = new THREE.TextureLoader().load(lineBreak[i],function(tex){ thumbHeight = Math.ceil( (tex.image.height/ tex.image.width ) * thumbWidth); if(thumbHeight > th){ th = thumbHeight; } picH = thumbHeight; let sha = picH/thumbWidth; // 将高度像素转换为可以使用缩放的数字 thumb[i].scale.set(1 ,sha); //缩放网格 });
如何将我的问题标记为“已解决”？谢谢

标签： javascript

【解决方案1】：

好的，我想通了。

我需要在我的 for 循环之前创建平面几何体，并在我的纹理函数中做更多的数学运算，然后缩放网格。如下所列：

texture[i] = new THREE.TextureLoader().load(lineBreak[i], function(tex){ 
     thumbHeight = Math.ceil( (tex.image.height/ tex.image.width) * thumbWidth);
     if(thumbHeight > th){ th = thumbHeight; } picH = thumbHeight;
     let sha = picH/thumbWidth; // turn height pixels to a number that scale can use
     thumb[i].scale.set(1,sha); //scale the mesh 
});

【讨论】：