如何在ThreeJS中点击移动设备?

时间:2017-02-15 13:08:28

标签: three.js dom-events mobile-devices

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

我创造了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 ));

然后添加事件:

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

它们在桌面上工作得非常好,但不能在移动设备上工作。

是库的问题还是我的场景? 如何让点击在所有设备上都运行良好?

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

enter image description here

1 个答案:

答案 0 :(得分:2)

我使用这样的东西:

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/