2017-02-15 68 views
0

我使用DomEvents library来点击场景中的元素。如何在ThreeJS中点击移动设备?

创建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

选中iPad mini + iOS10.2.1 + Chrome:点击红点结果显示其他模型+文本栏+视频。它预期的行为?此外,来自DomEvents官方网站的例子运行良好。 – prisoner849

回答

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/