[英]Creating clickable polygons three.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);
它會顯示,但多邊形不可點擊。 如果我這樣爬行
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);
一切正常,可以單擊多維數據集,但是我需要一個多邊形。 單擊事件方法
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;
}
}
}
}
您有兩個錯誤。
您的OrthographicCamera
構造函數args不正確-倒置,並且近平面在相機后面。
//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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.