此 Glitch 项目中的完整代码。 https://glitch.com/~quickest-catshark
我在 public/components.js
中声明了一个自定义 AFRAME 组件,该组件在用鼠标拖动时会旋转项目。
AFRAME.registerComponent('drag-rotate-component', {
schema: { speed: { default: 10 } },
init: function () {
this.ifMouseDown = false;
this.x_cord = 0;
this.y_cord = 0;
document.addEventListener('mousedown', this.OnDocumentMouseDown.bind(this));
document.addEventListener('mouseup', this.OnDocumentMouseUp.bind(this));
document.addEventListener('mousemove', this.OnDocumentMouseMove.bind(this));
},
// When mouse down, save x and y coordinates of mouse position
OnDocumentMouseDown: function (event) {
this.ifMouseDown = true;
this.x_cord = event.clientX;
this.y_cord = event.clientY;
},
OnDocumentMouseUp: function () {
this.ifMouseDown = false;
// Save rotation to localstorage
let rotation = this.el.object3D.rotation.z;
localStorage.setItem('angle', rotation);
},
OnDocumentMouseMove: function (event) {
if (this.ifMouseDown) {
// Get difference between current mouse position and previous mouse position
var temp_x = event.clientX - this.x_cord;
var temp_y = event.clientY - this.y_cord;
this.el.object3D.rotation.z = temp_x * this.data.speed / 1000;
}
}
});
代码在浏览器中按预期工作。
但是当我从手机中的 Chrome 访问它时,在该区域拖动手指时没有任何反应。在我的 Surface Pro 触摸平板电脑上也不起作用。
如何让它在触摸设备上工作?
我尝试了这个问题中给出的答案 Mouse events not working in mobile
使用event.touches[0].clientX
和event.touches[0].clientY
。但这些返回未定义。
最佳答案
您需要使用 touchstart
、touchmove
、touchend
进行触摸,并且在这些事件中您将使用 event.touches[ 0].clientX
和 clientY
此外,您可能希望您的事件处理程序不是被动的,以便在 touchstart 中您可以告诉浏览器忽略触摸,否则页面将滚动/缩放/等...
您可以在此处找到示例
关于javascript - Three.js OnDocumentMouseDown 不适用于触摸屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59133359/