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

【问题标题】：How to load image into scene from menu items?如何从菜单项将图像加载到场景中？
【发布时间】：2019-04-19 05:45:48
【问题描述】：

单击菜单选项之一时，我需要将图像加载到场景中。任何朝着正确方向的推动将不胜感激。如果需要更多上下文，请告诉我。

我试过用这种方法加载它，测试一个变量，重新加载时场景保持不变：

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

【问题讨论】：

How to load scene from dropdown box?的可能重复
你有几个问题基本相同。最好发布一个并坚持下去。

标签： javascript html three.js

【解决方案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>

【讨论】：