Three.js 触摸相交在移动端答案

【问题标题】：Three.js touch intersects on mobileThree.js 触摸相交在移动端
【发布时间】：2021-03-24 19:36:43
【问题描述】：

我看到here 提到了这个问题，但是这个解决方案（e.touches[0].pageX 和 e.touches[0].pageY（而不是 e.clientX 和 e.clientY）不起作用）对我来说。

如果你触摸热点大约 10 次，并且幸运地击中了魔法点，或者有时你随机击中附近的某个地方，热点就会被选中，否则什么也不会。

我的代码：

        mouse.x = ( event.touches[0].pageX / window.innerWidth ) ;
        mouse.y = - ( event.touches[0].pageX / window.innerHeight );

//  This is the mouse clicks that do work        
//mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
//mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;


var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );

    projector.unprojectVector( vector, camera );

    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = ray.intersectObjects( targetList, true );

    if ( intersects.length > 0)
        hotspotClick(intersects[ 0 ].object);

编辑

我在这方面取得了一些进展

        mouse.x = ( event.touches[0].pageX / window.innerWidth ) * 0.1;
        mouse.y = ( event.touches[0].pageY / window.innerHeight ) * 0.1;

但是，它似乎要么单击网格附近的任意位置将其激活，要么您必须按下网格中间某处的某个位置。所以我假设乘数出来了。

X 似乎没问题，Y 似乎是问题所在。

有人可以帮忙吗？

【问题讨论】：

标签： mobile three.js touch

【解决方案1】：

成功了

mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;

mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;

window.innerwidth 必须是 window.innerWidth！

【讨论】：

【解决方案2】：

我已经在装有 Chrome 和 Safari 的 iPad 以及装有 Chrome 的 Android 上对其进行了测试。

document.body.appendChild(renderer.domElement);
document.addEventListener('touchend', onDocumentTouchEnd, false);

function onDocumentTouchEnd(event) {
    event.preventDefault();

    mouse.x = (event.changedTouches[0].clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.changedTouches[0].clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(yourObject3D);
}

添加renderer.domElement后开始运行良好。

在我使用 event.Touches 之前结果好坏参半。

【讨论】：

【解决方案3】：

使用下面的代码获得正确的相交

event.preventDefault();

var rect = Canvas_Instance.getBoundingClientRect();

mouse.x = + ( (event.targetTouches[ 0 ].pageX - rect.left) / rect.width ) * 2 - 1; mouse.y = - ((event.targetTouches[0].pageY - rect.top) / rect.height) * 2 + 1;

【讨论】：