How tro make clicks on mobile devices in ThreeJS?

Question

I use DomEvents library to make clicks on elements in scene.

I create eleemets:

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 ));

And then add events:

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

They works very good on desktop, but not working on mobile devices.

Is it problem of library or in my scene? How to make clicks working good on all devices?

DEMO: http://cavsys.ru/o-tehnologii/fizicheskij-uroven/

Checked with iPad mini + iOS10.2.1 + Chrome: tapping the red dot results to show the other model + text field + video. Is it expected behaviour? Also, examples from the official site of DomEvents are working well. — prisoner849, Feb 16 '17 at 08:12

score 2 · Accepted Answer · answered Feb 15 '17 at 16:43

I use something like this:

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)
}

and

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
}

You can see full code here: https://jsfiddle.net/brbfdLo5/1/

I don't understood how to use it. I'm following this instructions, but not click not working in mobile browser yet: https://github.com/jeromeetienne/threex.domevents — Jhonatan Pereira, Feb 01 '19 at 17:58

How tro make clicks on mobile devices in ThreeJS?

1 Answers1