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

I'm creating an UI in which the user will be able to change the texture of the selected object by clicking on the desired textures picture.

The problem is that I can only use the last texture added in the array.

Here is my php which lists the textures in my specified folder:

<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>

And here's my function:

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;
    }
  }
}

I think the problem comes from the array.

dongtiannai0654
dongtiannai0654 每次你的php循环运行时,它都会设置$texidjavascript变量,覆盖循环设置的最后一个值,因此只有1$texid变量是最后一个值。就个人而言,我可能甚至不会将它们添加到数组中,而是将所需的值放在lidom元素的data属性中
接近 5 年之前 回复

1个回答

Thanks to 2pha I could achieve what I wanted to do.

Here's my new code: (The 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>

(And the 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;
        }
    });
}

Thank you :)

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问