Threejsとionic2でつくるipad appでオブジェクトのクリック判定

clickだと300ms遅延が発生するので、試行錯誤したのでメモしときます。

click
↓
touchstart

こちらを参考にして書いたのですが、clickをtouchに変えただけだと、なんかクリック位置が全然ずれてしまってました。

ev.clientX
↓
ev.touches[0].clientX

これでいけました

let mouse = { x: 0, y: 0 }   
interface HTMLElementEvent<T extends HTMLElement> extends Event {
  target: T,clientX: any,clientY: any,touches: any 
}

let touchObj  = null;
window.addEventListener( "touchstart", (ev: HTMLElementEvent<HTMLInputElement>) => {
  if (ev.target == renderer.domElement) { 
    let rect = ev.target.getBoundingClientRect()    
    console.log(ev)
    mouse.x =  ev.touches[0].clientX - rect.left
    mouse.y =  ev.touches[0].clientY - rect.top
    mouse.x =  (mouse.x / window.innerWidth) * 2 - 1    
    mouse.y = -(mouse.y / window.innerHeight) * 2 + 1 
    let vector = new THREE.Vector3( mouse.x, mouse.y ,1) 
    vector.unproject(camera)
    let ray = new THREE.Raycaster( camera.position, vector.sub(camera.position).normalize() )
    let click_obj = ray.intersectObjects(targetList,true)
    if ( click_obj.length > 0 && this.toggle_cut == true ){    
      for(let key in this.dataList){
        if(click_obj[0].object.name === this.dataList[key].name){
          touchObj = this.dataList[key]
        }
      }
    } 
  }
})

無謀にもthreejs と　ionic2で作ってますがなんとか動いています。