Как сделать клики на мобильных устройствах в ThreeJS?

Я использую библиотеку DomEvents для кликов по элементам сцены.

Я создаю элементы:

domEvents = new THREEx.DomEvents(camera, renderer.domElement);
material0 = new THREE.MeshBasicMaterial({ 
 transparent: true,
 opacity: 0,
 map: runnerTexture, 
 side: THREE.DoubleSide,
 depthWrite: false
});
mesh_un[3] = new THREE.Mesh( geometry0, material0 );
mesh_un[3].name = 'obj3';
mesh_un[3].position.set(-1200, 7200, 5800);
mesh_un[3].add(new THREE.Mesh( geometry, material ));

Затем добавьте события:

domEvents.addEventListener(element, touchEvent, function(event) {
 console.log(event);
 page.popup(index);
 return true;
});

Они очень хорошо работают на настольных компьютерах, но не работают на мобильных устройствах.

Это проблема библиотеки или моей сцены? Как сделать так, чтобы клики работали на всех устройствах?

ДЕМО: http://cavsys.ru/o-tehnologii/fizicheskij-uroven/

введите описание изображения здесь


three.js mobile-devices dom-events
person skywind    schedule 15.02.2017    source источник
comment
Проверено с iPad mini + iOS 10.2.1 + Chrome: нажатие красной точки приводит к отображению другой модели + текстовое поле + видео. Это ожидаемое поведение? Также хорошо работают примеры с официального сайта DomEvents.   -  person prisoner849    schedule 16.02.2017

Ответы (1)


arrow_upward
2
arrow_downward

Я использую что-то вроде этого:

this.init = function (picker) {
    camera = GameScene.getCamera()
    container = GameRenderer.getDomElement()

    container.addEventListener('mousedown', picker.onContainerMouseDown, false)
    container.addEventListener('mousemove', picker.onContainerMouseMove, false)
    container.addEventListener('mouseup', picker.onContainerMouseUp, false)
    container.addEventListener('mouseout', picker.onContainerMouseOut, false)


    container.addEventListener('touchstart', picker.onContainerTouchStart, true)
    container.addEventListener('touchmove', picker.onContainerTouchMove, true)
    container.addEventListener('touchend', picker.onContainerTouchEnd, true)
    container.addEventListener('touchcancel', picker.onContainerTouchEnd, true)
}

и

this.onContainerTouchStart = function (event) {
    event.offsetX = event.changedTouches[0].clientX
    event.offsetY = event.changedTouches[0].clientY

    handleDownStart(event)
}
this.onContainerMouseMove = function (event) {
    if (Page.hasTouch()) {
        return
    }
    handleMove(event)
}
this.onContainerTouchMove = function (event) {
    event.offsetX = event.changedTouches[0].clientX
    event.offsetY = event.changedTouches[0].clientY

    handleMove(event)
}
this.onContainerMouseUp = function (event) {
    if (Page.hasTouch()) {
        return
    }
    //console.log('up')
    event.preventDefault()
    dragStart = 0
}
this.onContainerMouseOut = function (event) {
    event.preventDefault()
    dragStart = 0
}
this.onContainerTouchEnd = function (event) {
    //console.log('touchEnd')
    dragStart = 0
}

Вы можете увидеть полный код здесь: https://jsfiddle.net/brbfdLo5/1/

person Pogromca Motyli    schedule 15.02.2017
comment
Я не понял, как его использовать. Я следую этим инструкциям, но клик пока не работает в мобильном браузере: github.com/jeromeetienne/threex .domevents - person Jhonatan Pereira; 01.02.2019