Показать сообщение отдельно
  #1 (permalink)  
Старый 27.01.2021, 21:49
Кандидат Javascript-наук
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 130

Какие event принято биндить для 3Д вращения в мобильном приложении?
Добрый день,

помогите, пожалуйста, советом!

Недавно начал разрабатывать приложение базы молекул, которое лежит тут. В базе можно поискать молекулы и результаты покрутить на экране в 3Д (WebGL, каюсь, еще не прикрутил, хотя планирую).

В обычном браузере я использую евенты:

mousedown,
mouseup,
mousemove,
mouseleave

Если произошел mousedown и потом потащили, то я вращаю молекулу на экране, а при mouseleave или mouseup сохраняю величину поворота. Если было нажато mousedown и сразу mouseup (фактически был клик), и мы попали на атом, то я его маркирую, чтобы показать свойства молекулы - длины связей, углы и торсионные углы.

Я хотел бы, чтобы мое клиенское приложение так же работало на мобильнике. Вернее не также, а так, чтобы всеми узнаваемо.

Попробовал забиндить

Код:
mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove
mouseleave -> touchcancel
дополнительно пришлось добавить в начале event.preventDefault(); и все евенты биндить как:

Код:
canvas.addEventListener('touchstart',  MolFrameCanvasTouchMouseDown, true);
Но получается лажа... Когда я нажимаю пальцем, то touchstart получается, а вот когда я заканчиваю, touchend обычно не срабатывает.

Более того, touchmove часто вызывается несколько раз друг за другом, и надо семафорить, а я не понимаю как. В обычном браузере я заводил глобальную переменную var Busy, и присваивал ей 1 при входе в первый mousemove, а по выходе занулял и такой семафор работал, а в мобильном так не получается...

Пожалуйста, подскажите, правильно ли я в мобильном приложении пользую соответствие:

Код:
mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove
mouseleave -> touchcancel
и как семафорить наплывающие друг за другом евенты от touchmove,

а может я просто не то использую в мобильном приложении и надо другие евенты пользовать, пожалуйста, посоветуйте?

PS: пример отрисовки 3Д у меня в базе: если Вы кликните по ссылке https://www.elegant-nmr.com/mdb/ и в первом поле введете например, C2, и нажмете на "Search Molecules", появится список молекул, удовлетворяющий поиску. Под каждой такой молекулой можно переключиться 2D - Conformer #1, в 2D ничего двигать нельзя, а в Conformer как раз мышкой в настольном браузере можно крутить молекулу и отмечать ее атомы. В мобильнике я пытался, но, пока лажа получается.

Спасибо!
Ответить с цитированием