Question

使用three.js上的资源以及其他问题，我创建了一个GLTF模型，当鼠标在画布上移动时，它会跟随鼠标移动（请参见下面的代码笔）。

但是，在我的android手机上查看页面时，该模型不会像在OrbitControls中使用的那样旋转以跟随触摸。我试图了解如何使用事件监听器； touchstart，touchend和touchmove，因为我认为这可能是我需要它来响应触摸事件的原因，但是不幸的是，我不太擅长JavaScript，并且对three.js不太熟悉。

一个可行的示例（尽管我不知道他们是否正在使用three.js）在此页面上：https://garden-eight.com/。模型跟随鼠标，而在移动设备上观看时，手指跟随。

任何人都可以借用他们的专业知识吗？：）

我很乐意提供更多信息。我在StackOverflow上没有问很多问题。

https://codepen.io/Beddalla/pen/qGLeyR

geometry: {
  type: geoSchema
}

Answer 1

此问题的一种解决方案是将事件侦听器添加到touchmove事件，然后使用event.touches[ 0 ].clientX和event.touches[ 0 ].clientY中的事件数据来计算各自的mouse向量

function onTouchMove(event){

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

    // rest of your code

}

更新的Codepen：https://codepen.io/anon/pen/VOgwvO

three.js R105

我如何才能使我的GLTF对象跟随在电话上使用触摸的某人？

1 个答案: