如何在组中的特定网格上捕获点击事件

Question

我有一组圆形几何元素，它们位于二十面体元素的顶点上。我想使用 jQuery 在每个单独的圆元素上执行单击事件。那么如何在这些元素上实现jQuery点击事件..

建议我做一些好的参考..

Answer 1

使用光线投射方法。基本机制是这样的：（三个修订版 70 和 javascript vanila）

1) 设置目标

var targets = [], 
    // When defining your 3d objects, use the push method 
    // to select the meshes you want to intersect.
    // targets.push(objectMesh);

2) 设置 raycaster

var raycaster = new THREE.Raycaster(),
    mouse = new THREE.Vector2(),
    intersects;

3) 与目标相交

searchTarget(event){
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    intersects = raycaster.intersectObjects(targets);
    if (intersects.length > 0){
         // Use the intersected objects: 
         // intersects[0] represents the foremost object that was hovered
    }
}

4) 设置监听器

renderer.domElement.addEventListener('mousemove', searchTarget, false);

您也可以使用 jQuery：$( "#canvas" ).mousemove( searchTarget );

如何在组中的特定网格上捕获点击事件

how to catch the click event on a specific mesh in a group

javascript

three.js