如何模拟三中的点击？ [复制]答案

【问题标题】：How to simulate a click in THREE? [duplicate]如何模拟三中的点击？ [复制]
【发布时间】：2018-04-20 11:38:19
【问题描述】：

我有一个独特的情况，我希望能够模拟对对象的点击。例如，UI 提供了一种通过scene.getObjectByName(objectName, true) 挑选场景内某个元素的方法，我希望能够click 这个对象。

显然，我可以公开真正的 click 的功能，但在这些情况下，我需要通过 JavaScript（例如 $canvas.trigger($.Event('click', { clientX: 10, clientY: 20 }))）实际驱动点击屏幕。

执行此操作的最佳技术是什么。我想我必须将对象的位置转换为屏幕(X, Y) 并简单地触发这些坐标的点击？但这需要精确的点击坐标，我不确定如何从网格中获取。

【问题讨论】：

这听起来不是特别独特。

标签： three.js

【解决方案1】：

我确定这是重复的。

无论如何，这是一种方法：

fetchRayCastTop = function (event, arr, camera, renderer) {
    var testSet = arr;
    if (this.raycaster === false) {
            this.raycaster = new THREE.Raycaster();
    }
    var mouse = new THREE.Vector2();
    mouse.x = event.offsetX / renderer.domElement.width * 2 - 1;
    mouse.y = -(event.offsetY / renderer.domElement.height) * 2 + 1;
    this.raycaster.setFromCamera(mouse, camera);
    var intersects = this.raycaster.intersectObjects(testSet, true);
    object = undefined;
    if (intersects.length > 0) {
            object = intersects[0];
    }
    return object;
};

切换网格颜色的用法：

var alistOfObjectsYouWantMouseeventsFor = [list of object3d objects here.];

element.addEventListener("click", function(e){
    picked = fetchRayCastTop(e, alistOfObjectsYouWantMouseeventsFor, yourCamera, yourRenderer);
    var mat = picked.object.material;
    if(mat != undefined){
      if(mat.length == undefined){
        mat = [mat];
      }
      for(var i=0; i<mat.length; i++){
        if(mat[i].cachedColor != undefined){
            mat[i].color.copy(mat[i].cachedColor);
            delete mat[i].cachedColor;
        }else{
          mat[i].cachedColor = new THREE.Color().copy(mat[i].color);
          mat[i].color.setHex(0xFF0000);
          mat[i].side = THREE.DoubleSide;
        }
     }
});

【讨论】：