zoukankan      html  css  js  c++  java
  • Threejs轨道控制器(OrbitControls)对touchmove事件的拦截

    Threejs的轨道控制器(OrbitControls)对touchmove冒泡事件的拦截

    作者:咕魂

    时间:2021年7月18日

    问题描述:

    创建控制器的方法:

    new THREE.OrbitControls(camera, renderer.domElement) //创建控件对象
    

    添加touch相关的事件监听函数

    document.addEventListener('touchstart', onTouchStart)
    document.addEventListener('touchmove', onTouchMove)
    document.addEventListener('touchend', onTouchEnd)
    function onTouchStart(event){...}
    function onTouchMove(event){...}
    function onTouchEnd(event){...}
    

    此时document的事件函数是renderer.domElement的父级

    查看OrbitControls.js的源码

    找到onTouchMove(event)函数

    往下找两行可以看到

    event.preventDefault()
    event.stopPropagation()
    

    其中stopPropagation()会对冒泡事件进行拦截,即上文中通过对document对象添加监听函数会无法触发

    解决办法:

    直接改OrbitControls.js的源码,注释掉event.stopPropagation()

    但一般不会这么做,毕竟这是人家官方给的

    还有一个方法就是监听事件不要挂载在document上,和OrbitControls.js中的onTouchMove(event)一样,挂载到renderer.domElement上,即:

    document.addEventListener('touchstart', onTouchStart)
    renderer.domElement.addEventListener('touchmove', onTouchMove)
    document.addEventListener('touchend', onTouchEnd)
    

    之后就可以触发onTouchMove函数了

    应用项目:3D扫雷

    参考链接:js中的preventDefault与stopPropagation详解

  • 相关阅读:
    [HAOI2008]硬币购物
    [SCOI2005]骑士精神
    [ZJOI2007]最大半联通子图
    [HAOI2007]反素数
    [SCOI2005]繁忙的都市
    小凯的疑惑
    5月16日vj题解
    周六题目前四题详解
    Codeforces Round #629 (Div. 3)做题记录
    Codeforces Round #570 (Div. 3) B. Equalize Prices
  • 原文地址:https://www.cnblogs.com/guhunjun/p/15027152.html
Copyright © 2011-2022 走看看