Three.js：在运行时更改纹理

Question

我正在创建一个UI，用户可以在其中单击所需的纹理图片来更改所选对象的纹理。

问题是我只能使用数组中添加的最后一个纹理。

这是我的php，其中列出了我指定文件夹中的纹理：

<ul id="textureH">
    <script type="text/javascript">
      texArray = [];
    </script>
    <?php
    for($index=0; $index < $indexCount; $index++) {
        $extension = substr($dirArray[$index], -3);

        if ($extension == 'jpg'){
            $texName = $dirArray[$index];
            $texId = "texture". $index;
            ?>

        <script type="text/javascript">
            var texName = '<?php echo $texName ?>';
            var texId = '<?php echo $texId ?>';

            texArray.push(texId);
        </script>
            <?php
            echo "<li id='".$texId."'><table><tr><td><img class='texture-image-list' src='img/" . $texName . "' alt='Image' /></td><td><span id='texture-item-name'>" . $texName . "</span></td></tr></table></li>";
        }   
    }
    ?>
</ul>

这是我的功能：

var uTexture = document.getElementById(texId);
uTexture.addEventListener("click", updateTexture, false);
function updateTexture(){
  var texMap = "./img/" + texName;

  for (var i in texArray) {
    if ((texArray[i] == texId) && (SELECTED instanceof THREE.Mesh)) {
      SELECTED.material.map = THREE.ImageUtils.loadTexture(texMap);
      SELECTED.material.needsUpdate = true;
    }
  }
}

我认为问题出在数组上。

Answer 1

多亏了2pha，我才能实现自己想做的事情。

这是我的新代码：（php / html）

<div class="right-panel-textures">
<h3 id="cat-hierarchy">Textures</h3>
<?php
    $myDirectory = opendir('img/textures');

    while($entryName = readdir($myDirectory)) {
        $dirArray[] = $entryName;
    }
    sort($dirArray);
    closedir($myDirectory);
    $indexCount = count($dirArray);
?>

<ul id="textureH">              
    <?php
    for($index=0; $index < $indexCount; $index++) {
        $extension = substr($dirArray[$index], -3);
        $texName = $dirArray[$index];
        $texId = "texture". $index;
        if ($extension == 'jpg'){
            ?>

        <script type="text/javascript">
            var texName = '<?php echo $texName ?>';
            var texId = '<?php echo $texId ?>';
        </script>

        <?php
            echo "<li class='texture-single-item' data-texture-name='".$texName."' data-texture-id='".$texId."' id='texture-single-item'><table><tr><td><img class='texture-image-list' src='img/textures/" . $texName . "' alt='Image' /></td><td><span id='texture-item-name'>" . $texName . "</span></td></tr></table></li>";
        }   
    }
    ?>
</ul>
</div>

（以及JavaScript）

var uTexture = document.getElementById("texture-single-item");
uTexture.addEventListener("click", updateTexture, false);
function updateTexture(){
    $(".texture-single-item").bind("click", function(event) {

      var nameT = $(this).attr("data-texture-name");
        if (SELECTED instanceof THREE.Mesh) {
          var texMap = "./img/textures/" + nameT;

          SELECTED.material.map = THREE.ImageUtils.loadTexture(texMap);
          SELECTED.material.needsUpdate = true;
        }
    });
}

谢谢 ：）