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

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>

​