Question

单击菜单选项之一时，我需要将图像加载到场景中。向正确方向的任何推动将不胜感激。让我知道是否需要更多上下文。

我尝试使用此方法加载它，以测试变量，并且重新加载时场景保持不变：

            var testButton = document.getElementById('box1');

            testButton.onclick = function (sceneEditor) {
            sceneEditor = new Scene(img3, camera);
            alert("!");   //test alert
            window.location.reload();

            };

html下拉菜单：

<select id="box1" style="margin-left:120px; margin-bottom:-20px; margin- 
top:-30px; padding-top:0">
<option onclick="" value="1">111</option>
<option onclick="" value="2">222</option>
<option onclick="" value="3">333</option>
<option onclick="" value="4">444</option>
</select>

图像变量和示例场景；

var img1 = 'images/111.jpg';
var img2 = 'images/222.jpg';
var img3 = 'images/333.jpg';
var img4 = 'images/444.jpg';

var sceneEditor = new Scene(img2, camera);

Answer 1

我认为最简单的方法是将所有图像添加到页面中，然后隐藏它们，直到单击一个选项为止。我已经尝试过在下面进行非常简化的操作（我使用了随机图片，但是您可以用自己的图片替换它们）

    <select id="box1" style="margin-left:120px; margin-bottom:-20px; margin-
    top:-30px; padding-top:0" onchange="changeImg();">
    <option onclick="" value="1">111</option>
    <option onclick="" value="2">222</option>
    <option onclick="" value="3">333</option>
    <option onclick="" value="4">444</option>
  </select>
  <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/TVE_La1_-_Logo_2008.png" alt="google" id="imageOne" style="display: none;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Logo_TVE-2.svg/1200px-Logo_TVE-2.svg.png" alt="twitter" id="imageTwo" style="display: none;">
  <img src="https://www.johnbrownhardware.co.uk/ekmps/shops/513a47/images/classic-designs-3-black-number-3-digit-pack-5-54617-p.jpg" alt="google" id="imageThree" style="display: none;">
  <img src="https://d9np3dj86nsu2.cloudfront.net/image/ceb24870f9f782a6b45b1de4560758bd" alt="twitter" id="imageFour" style="display: none;">
  <script>
    function changeImg() {
      let a = document.getElementById("box1").selectedIndex;
      if (a == "0") {
          document.getElementById("imageOne").style.display = ""
          document.getElementById("imageTwo").style.display = "none"
          document.getElementById("imageThree").style.display = "none"
          document.getElementById("imageFour").style.display = "none"
      } else if (a == "1") {
        document.getElementById("imageOne").style.display = "none"
        document.getElementById("imageTwo").style.display = ""
        document.getElementById("imageThree").style.display = "none"
        document.getElementById("imageFour").style.display = "none"
      } else if (a == "2") {
        document.getElementById("imageOne").style.display = "none"
        document.getElementById("imageTwo").style.display = "none"
        document.getElementById("imageThree").style.display = ""
        document.getElementById("imageFour").style.display = "none"
      } else if (a == "3") {
        document.getElementById("imageOne").style.display = "none"
        document.getElementById("imageTwo").style.display = "none"
        document.getElementById("imageThree").style.display = "none"
        document.getElementById("imageFour").style.display = ""
      }

    }
  </script>

如何通过菜单项将图像加载到场景中？

1 个答案: