Comment tro faire des clics sur les appareils mobiles dans ThreeJS?

Question

J'utilise DomEvents library pour faire des clics sur les éléments de la scène.

Je crée 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)); 

Et puis ajouter des événements:

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

Ils fonctionne très bien sur le bureau, mais ne fonctionne pas sur les appareils mobiles.

Est-ce un problème de bibliothèque ou dans ma scène? Comment rendre les clics fonctionnels sur tous les appareils?

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

Answer 1

J'utilise quelque chose comme ceci:

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

et

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 
} 

Vous pouvez voir le code complet ici: https://jsfiddle.net/brbfdLo5/1/