Javascript 创建可单击多边形3.js

我用three.js创建可点击的多边形，用这种方式创建多边形

var geo = new THREE.Geometry();
            geo.vertices.push(new THREE.Vector3(0.3, 0.3, 0.5));
            geo.vertices.push(new THREE.Vector3(0.3, 0.4, 0.5));
            geo.vertices.push(new THREE.Vector3(0.4, 0.4, 0.5));
            geo.vertices.push(new THREE.Vector3(0.6, 0.35, 0.5));
            geo.vertices.push(new THREE.Vector3(0.4, 0.3, 0.5));                

            for (var face = 0 ; face < 5 - 2; face++) {
                // this makes a triangle fan, from the first +Y point around
                geo.faces.push(new THREE.Face3(0, face + 1, face + 2));
            }

            var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 }));
            geo.computeFaceNormals();

            layer.add(mesh);
            objects.push(mesh);

一切都很好，立方体是可点击的，但我需要一个多边形。 单击事件方法

function onDocumentMouseClick(event) {
        layerMap.update();
        var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
        var ray = projector.pickingRay(vector, camera);
        var intersects = ray.intersectObjects(objects);
        if (intersects.length > 0) {
            intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
        }
    }

我有太多不同的多边形

---

如何创建可单击多边形？

您必须使用

THREE.Ray

类的

intersectTriangle（）

函数。 如果

object

是你的

THREE.Mesh

在你的三角形上循环，并检查如下交点：

function onDocumentMouseClick(event) 
{

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    var ray = projector.pickingRay(vector, camera);
    var currentTriangle;
    var currentIntersection, chosenIntersection;
    var currentDistance, chosenDistance;
    var distanceVector;

    chosenIntersection = null;
    chosenDistance = Infinity;

    var vertices = object.geometry.vertices;

    for (var i = 0; i < object.geometry.faces.length; i++)
    {
      currentTriangle = object.geometry.faces[i];
      currentIntersection = ray.intersectTriangle( vertices[ currentTriangle.a ], vertices[ currentTriangle.b ], vertices[ currentTriangle.c ], true );

      if( currentIntersection !== null )
      {
        // The following code checks if a found intersection is closer to the camera than a previous one.
        distanceVector.subVectors(currentIntersection, ray.origin);
        currentDistance = distanceVector.length();

        if( currentDistance < chosenDistance)
        {
          chosenIntersection = currentIntersection;
          chosenDistance = currentDistance;
        }
      }   
   }
}

函数onDocumentMouseClick（事件）
{
var vector=new THREE.Vector3（（event.clientX/window.innerWidth）*2-1，-（event.clientY/window.innerHeight）*2+1，0.5）；
var ray=投影仪。pickingRay（矢量、相机）；
无功电流三角形；
var CurrentCrossion，ChosenCrossion；
无功电流距离，chosenDistance；
var距离向量；
chosencrossion=null；
chosenDistance=无穷大；
var顶点=object.geometry.vertices；
对于（变量i=0；i

您有两个错误

您的

正交摄影机

构造函数参数不正确--它是颠倒的，并且近平面在摄影机后面

//this.camera = new THREE.OrthographicCamera(0, 1, 0, 1, -3000, 3000);
this.camera = new THREE.OrthographicCamera(0, 1, 1, 0, 1, 3000);

几何体上的缠绕顺序为顺时针方向；应为逆时针方向（CCW）

提示：使用three.js的非精简版本进行调试。另外，下载本地副本供您使用

---

three.js r.60

您使用的是three.js r.60的当前版本吗？是的，three.WebGLRenderer 60。您可以提供一个实例吗？您不需要为自定义几何体计算BoundingSPhere/BoundingBox吗？使用各自的功能？我只能提供zip文件的链接[link]，这种方式可以帮助我找到交互多边形，但我在缩放和拖动地图时遇到了一个新问题，地图上的元素不是固定的，在我的版本中，缩放和拖动工作应该是正常的。我回答了你关于three.js的问题。请记住点击复选标记“接受”这个答案。如果您的代码有其他问题，请发布新问题。试着问一些对别人有帮助的问题。谢谢你，谢谢你的帮助！

//this.camera = new THREE.OrthographicCamera(0, 1, 0, 1, -3000, 3000);
this.camera = new THREE.OrthographicCamera(0, 1, 1, 0, 1, 3000);

//geo.faces.push(new THREE.Face3(0, face + 1, face + 2));
geo.faces.push(new THREE.Face3(0, face + 2, face + 1));