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详解

  • 相关阅读:
    第五小节之JAVA IO流
    第四小节之Java 集合类
    初学的重点
    第三小节之Java API
    实践周java基础软件开发app之五子棋
    出栈合法性
    Python介绍
    Ubuntu主题美化篇
    Ubuntu16.04比较好的一系列软件安装介绍
    Ubuntu使用Shadow socks-qt5
  • 原文地址:https://www.cnblogs.com/guhunjun/p/15027152.html
Copyright © 2011-2022 走看看