javascript - JS 和 CSS 菜单停止在 webgl 页面上工作

Question

我有一个由几个图标组成的简单导航，当您单击一个 JS 和 CSS 时，会创建一个滑入式菜单。它一直运行到现在，由于某种原因它不再运行了，我不确定它是否与页面上的 webgl 有关，或者是否是其他原因。

网站:www.explorecanterbury.co.uk

CSS

.photo-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 370px;
  height: 100%;
  max-height: 700px;
  overflow-x: hidden; 
  display:none;
  background: #ddd;
  text-align: left;
  box-shadow: 1px 4px 4px #999;
}
.nav-toggle-2 {
  width: 24px;
  height: 24px;
  display: block;
 }
.nav-toggle-3 {
  width: 24px;
  height: 24px;
  display: block;
}

.information-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display:none;
  background: #ddd;
  text-align: left;
  box-shadow: 1px 4px 4px #999;
}

.LocIcon {
  background-image:url(/images/select.png);
  width:24px;
  height:24px;
  display: block;
}

.photosIcon {
  background-image:url(/images/photos.png);
  width:24px;
  height:24px;
  display: block;
}

.infoIcon {
  background-image:url(/images/information.png);
  width:24px;
  height:24px;
  display: block;
}
.searchIcon {
  background-image:url(/images/search.png);
  width:24px;
  height:24px;
  display: block;
}

JS

$(document).ready(function() {

    $(function() {
      $('.nav-toggle-3').on('click', function() {
        $(".information-menu").animate({width:'toggle'},200);
      });

      $('.nav-toggle-2').on('click', function() {
        $(".photo-menu").animate({width:'toggle'},200);
      });
    });
});

HTML

<nav class="navbar navbar-default" style="z-index:6;">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li>
            <ul class="dropdown-menu">
              <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Museums and Galleries</a></li>
              <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Landmarks</a></li>
              <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Shopping</a></li>
              <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Churches</a></li>
              <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Tours and Guides</a></li>
            </ul>
            <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
            <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
            <li><span class="searchIcon hidden-xs"></span></li>
            </ul>
          <form class="navbar-form hidden-xs" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            </div>
          </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

function onDocumentMouseUp( event ) {

    // create a Ray with origin at the mouse position
    //   and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    // create an array containing all objects in the scene with which the ray intersects
    var intersects = ray.intersectObjects( targetList, true);

    if ( intersects[ 0 ].object.name === "Canterbury Tale")
    {
        alert("Canterbury Tale has been clicked!");
    }

    if ( intersects[ 0 ].object.name === "Westgate")
    {
        alert("Westgate has been clicked!");
    }   

    if ( intersects[ 0 ].object.name === "Cathedral")
    {
        document.getElementById('canttaleDiv').style.display = "block"; 
    }   
    }

分析您的代码，这直接显示在控制台中。当您单击导航栏时，onDocumentMouseUp 方法会以某种方式被调用，因此它会尝试分析 intersects[ 0 ].object.name，但失败了，什么也没有发生。您可能希望将此方法放置(或绑定(bind))到 3D 模型的包装器上，而不是整个文档上。