Question

我想知道我们是否可以在前景上有一个等距的全景图，在背景中有一个网格，以便当用户在全景图上移动时，鼠标能够从后面拾取平面信息。

我尝试使用以下代码加载全景图，但找不到在背景中分层网格的任何方法。

var sphereBufferGeometry = new THREE.SphereGeometry(500,60,40);
sphereBufferGeometry.scale( -1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
    map: new THREE.TextureLoader().load( [panorama image])});
var mesh = new THREE.Mesh( sphereBufferGeometry, material );
scene.add( mesh );

我也尝试过使用以下代码加载mesh（.obj），但变量“ object”的类型为THREE.Group，变量“ child”返回多个类型为THREE.MESH的对象。因此，我不确定如何在前景中放置全景图。

objLoader.load( [objfile], function ( object ) {
  object.traverse( function ( child ) {
  });
});

任何帮助将不胜感激。

谢谢

Answer 1

将图像放在页面上，然后向其添加图像映射。对任何会触发事件的单元执行您想要的任何操作。为了进行概念验证，我只记录了引发点击事件的单元格的坐标-左上角有序对和右下角有序对。

您可以将click替换为mouseover / out呼叫。如果将单元格的高度和宽度减小到1px，则可以在鼠标穿过图像时跟踪确切的位置...警告-那里有很多事件处理。

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript"">
      // convenience reference
      function get(eId) {return document.getElementById(eId);};

      // add area elements to an existing image map
      function paintMapGrid(imageId, gridId, cellHeight, cellWidth) {
          var imgHeight = get(imageId).height;
          var imgWidth = get(imageId).width;
          var lastJ = Math.floor(imgWidth/cellWidth);
          var lastI = Math.floor(imgHeight/cellHeight);
          var grid = '';
          for (var i = 0; i < lastI; i++) {
             for (var j = 0; j < lastJ; j++) {
                var coords= (cellWidth*j) + ',' + (cellHeight*i) + ',' +(cellWidth*(j+1) + ',' + (cellHeight*(i + 1))); 
                  grid += '<area onclick="logCellCoords(this);" shape="rect" coords="' + coords + '">';
             }
          }
          get('mesh').innerHTML = grid;
      };

      function logCellCoords(cRef) {
          console.log(cRef.coords);
      };

      window.onload = function() {
         // paint an image map on the image with id='meshImage', adding the 
         // area elements to the map with id="mesh"; cells are 16px wide 
         // and 16px tall
         paintMapGrid('meshImage', 'mesh', 16, 16);
      };
   </script>
</head>
<body>
    <div>
      <img src="yourPanoramicImage.jpg" alt="some 1024x668 panorama" 
         width="1024" height="668" usemap="#grid" id="meshImage"
      /> 
      <map name="grid" id="mesh"></map>
   </div>
</body>
</html>

事后回想...可能不需要那么多的资源，就可以在for循环的内部分别创建每个area元素并将其附加到其地图父对象，而不是全部创建整个HTML字符串并立即添加它。另外，不确定1px区域的浏览器容忍度如何，例如1024x668是否需要684032区域标记。我的POC需要64x41 = 2624个区域标签。

Answer 2

我能够找到解决方案。想法是在同一场景中同时具有球体几何和网格，并对网格进行任何初始位置/旋转/比例更改，以使其与全景图对齐。完成此操作后，对相机的任何更改都会以完全相同的方式影响两个对象，从而给用户留下这两个对象始终对齐的印象。

在全景图后面分层网格

2 个答案: