Welcome to reprint, reprint with the article source link ~~, I hope my experience can help you, have a problem you can click my avatar plus my wechat this article only to provide a solution to the problems encountered, for those who urgently want to achieve functional effect, I hope to be able to slightly sink down to watch, or directly watch the train of thought, The code of this article can not be used directly, the complete code is only the problem solved in this article to use the code, if directly used may have an error, as long as you modify the code can be used

Potree touch modification

In potree itself, only mouse events can select measurement of points, areas, elevations, etc. Touch events can only change perspective

– reference –

Programming JavaScript maps touch events to mouse events

Description –

The potree touch event has the following effect:

① Single finger operation, rotation of Angle of view
(2) Double finger operation, zoom perspective
(3) Three-finger operation, translation of the perspective

– Major version –

Potreejs 1.6

Thinking –

Find the relevant location of the code. 2. Operate through JS code. 3

– process –

1. Find the location of the code

Locate the corresponding position by positioning touchStart

2. Operate through JS code

The original plan is to operate through JS code, replace the methods of touch with the methods of mouse, running the code will report an error, found that the event parameters returned by the event are different, modify the event, reassign the event value, the code is as follows:

event=event.touches[0];
Copy the code

Buttons and event.buttons are not available, and event.touches. Length does not exist.

event.button =event.touches.length;
event.buttons =2 ** (event.touches.length - 1);
Copy the code

This allows you to add 1 finger for the left mouse button and 2 fingers for the right mouse button. Unfortunately, this method cannot add measurement successfully.

3. By mapping touch events to Mouse events

The mapping code is as follows:

function touchHandler(event){ var touches = event.changedTouches, first = touches[0], type = ""; switch(event.type){ case "touchstart": type = "mousedown"; break; case "touchmove": type = "mousemove"; break; case "touchend": type = "mouseup"; break; default: return; } // initMouseEvent; var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); event.preventDefault(); } function init() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); }Copy the code

After adjustment and modification, the code is integrated into potree as follows:

It turns out that when you do the multi-finger operation, you keep triggering the single finger, so it takes a long time, and then you switch to another method.

4. Rewrite part of the Touch code

When added, touch changes to Add. When not added, Touch changes to View control

4.1, the statementWhether to add measurevariableisAddMInto a global variable

Here I use true for not touching and false for touching

window.isAddM =true;
Copy the code

4.2, the statementNumber of fingers touchedvariabletouchNumInto a global variable

window.touchNum =0;
Copy the code

4.3. Find the place to create measure

① First find the PointPanel, check the new method, find the method ismarker_added

(2) find themarker_added, locate the methodaddMarker

③ Change when triggeredisAddM
isAddM =false;
Copy the code

4.4, modify,onTouchStart.onTouchEnd.onTouchMovemethods

Place the original code at isAddM ==true and change all three methods, as shown below:

4.5. Add measure of two fingers

All other panels need to be added with the right mouse button, except PointPanel, which can be added by clicking on the PointPanel. In this case, it can be added by randomly triggering other events or preventing bubbles.

① Touchstart judgment refers to multiple, the code is as follows:

② At the end of touchEnd, judge if it is multiple and exit, the code is as follows:

Can achieve the effect

– Complete code –

onTouchStart (e) { if(isAddM){ if (this.logMessages) console.log(this.constructor.name + ': onTouchStart'); e.preventDefault(); if (e.touches.length === 1) { let rect = this.domElement.getBoundingClientRect(); let x = e.touches[0].pageX - rect.left; let y = e.touches[0].pageY - rect.top; this.mouse.set(x, y); this.startDragging(null); } for (let inputListener of this.getSortedListeners()) { inputListener.dispatchEvent({ type: e.type, touches: e.touches, changedTouches: e.changedTouches }); } }else{ touchNum ++; } } onTouchEnd (e) { if(isAddM){ if (this.logMessages) console.log(this.constructor.name + ': onTouchEnd'); e.preventDefault(); for (let inputListener of this.getSortedListeners()) { inputListener.dispatchEvent({ type: 'drop', drag: this.drag, viewer: this.viewer }); } this.drag = null; for (let inputListener of this.getSortedListeners()) { inputListener.dispatchEvent({ type: e.type, touches: e.touches, changedTouches: e.changedTouches }); } }else{ touchNum --; if(touchNum >=1){ touchNum =0; isAddM =true; e.preventDefault(); } } } onTouchMove (e) { if(isAddM){ if (this.logMessages) console.log(this.constructor.name + ': onTouchMove'); e.preventDefault(); if (e.touches.length === 1) { let rect = this.domElement.getBoundingClientRect(); let x = e.touches[0].pageX - rect.left; let y = e.touches[0].pageY - rect.top; this.mouse.set(x, y); if (this.drag) { this.drag.mouse = 1; this.drag.lastDrag.x = x - this.drag.end.x; this.drag.lastDrag.y = y - this.drag.end.y; this.drag.end.set(x, y); if (this.logMessages) console.log(this.constructor.name + ': drag: '); for (let inputListener of this.getSortedListeners()) { inputListener.dispatchEvent({ type: 'drag', drag: this.drag, viewer: this.viewer }); } } } for (let inputListener of this.getSortedListeners()) { inputListener.dispatchEvent({ type: e.type, touches: e.touches, changedTouches: e.changedTouches }); } } // DEBUG CODE // let debugTouches = [...e.touches, { // pageX: this.domElement.clientWidth / 2, // pageY: this.domElement.clientHeight / 2}]; // for(let inputListener of this.getSortedListeners()){ // inputListener.dispatchEvent({ // type: e.type, // touches: debugTouches, // changedTouches: e.changedTouches // }); / /}}Copy the code