Event bubbling in threeJs

         In the past few days, I have encountered such a problem: I used threeJS to create a 3d rendering, and I used the orbitcontrols plug-in of threeJs in this project. The rendering needs to run in the mobile browser, since It is running on the mobile terminal, so naturally we need to use the touch function. In our common 3D graphics, there are functions that can rotate and translate. When I haven't touched threeJS, I often think about how to do these. Yes, I think it's very cool.

         In this project, there is such a requirement. When we pan the scene, there is a navigation bar on the left, which is an index used to display the details of each object (there is a Raycaster object in threeJs to achieve object picking Function, in this project, I take the center of the browser as the click point, so that there is a line segment from the camera to the center of the browser, so that the line segment has a series of intersections with the objects in the scene, and we can get the objects we want. The general idea of ​​ps object picking is this), after continuous debugging on the pc side, the effect can be achieved, but in the mobile browser, through custom sliding events, it is found that the effect is not what we imagined That's because the custom swipe event didn't work, what fuck!!!, what a sad story. But I have always believed in a sentence that problems and methods coexist. Since the problem occurs, there must be a solution, so after repeated inspections by myself, I finally found the problem: in the orbit control plugin of threeJs, orbitcontrols , is the sliding event bound to the canvas drawn on the page, and in the sliding event, it prevents the event from bubbling. The source code is as follows:

 When you customize the sliding event, you bind the document through addEventListener Events, we all know that the third parameter of the method addEventListener(eventType, function, boolean) is used to set whether the event is captured, so I set this parameter to false at that time, that is, the event is bubbling. Now you can imagine what the consequences will be. The canvas is a child node of the document, and when the sliding event is bound to the canvas, it prevents the event from bubbling. So naturally, my custom sliding event will be invalid. At this time, someone will ask, why doesn't this problem exist when you use the mouse to move on the PC side? Very good, I also had this question at the beginning. Later, with the attitude of learning, I checked the plug-in source code. The mouse movement event in the source code did not prevent the event from bubbling cry(Tucao, I don't quite understand what the editor of this source code thought. ), but of course it's a good thing that it didn't stop the event from bubbling up, hehe

        Finally, for the above problem, there are two solutions, one is a custom sliding event, using event capture, the other is to modify the source code of the orbitControls plugin, but the latter method, if you modify the source code rashly, maybe it will Caused other adverse reactions, so I finally used event capture. It can be seen that when using a plug-in, the best way is to read the source code of the method we use first, so as to avoid detours.

        Today is the Lantern Festival, here I wish you a happy Lantern Festival and be a deep code farmerlaughing out loud

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326119930&siteId=291194637