Three JS如何在移动设备上进行点击？

Question

我使用DomEvents library点击场景中的元素。

我创建元素：

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/

Answer 1

我用的是这样的：

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/

Three JS如何在移动设备上进行点击？

How tro make clicks on mobile devices in ThreeJS?

mobile-devices

dom-events

three.js