Question

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

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

这样做的最佳技巧是什么。我想我必须将对象的位置转换为屏幕(X, Y)并简单地触发那些坐标处的点击？但这需要精确的点击坐标，我不知道如何从网格中获得它。

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

如何模拟三次点击？

1 个答案: