Создания интерактивных многоугольников three.js

Question

Я использую 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); 

это отображается, но многоугольник не кликабелен. Если я cretae таким образом

var geometry = new THREE.CubeGeometry(0.02, 0.02, 0.02); 
      var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 })); 

      object.position.x = 0.5; 
      object.position.y = 0.5; 
      object.position.z = 0.5; 

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

все отлично работает и куб кликабельна, но мне нужен полигон. Нажмите метод Event

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

У меня есть слишком много различных многоугольники Как создать интерактивный полигон?

Answer 1

У вас есть две ошибки.

Недопустимые аргументы конструктора OrthographicCamera - это вверх дном, а ближайший самолет находится за камерой.

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

Порядок намотки на геометрию по часовой стрелке; он должен быть против часовой стрелки (CCW).

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

Подсказка: отладка с неинициализированной версией three.js. Также загрузите локальную копию для вашего использования.

three.js r.60

Answer 2

Вы должны использовать функцию intersectTriangle() класса THREE.Ray. Если 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; 
     } 
     } 
    } 
}