问题
In my aframe project i want to controll the movement speed with the cardboard magnetic button => start/stop with cardboard button.
On my desktop and phone the click event works like i want but if i put my iphone in the cardboard the button "click" doesn't trigger. If i touch with my finger on the scene it works...
Does the cursor need some settings to have access to the cardboard button? I tested the button in the google cardboard app and it worked.
Here is a little example of what i have. You can see the click event in the console.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Click Test</title>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@3.13.1/dist/aframe-extras.ocean.min.js"></script>
<script>
AFRAME.registerComponent("start-click", {
init: function() {
this.el.addEventListener("click", function() {
console.log("clicked in the scene")
});
}
});
</script>
</head>
<body>
<a-scene start-click>
<!-- sky + ocean -->
<a-sky radius="100" color="tomato" position="0 -6 0 "></a-sky>
<a-ocean id="ocean" width="200" depth="200" density="200" position="0 0 0"></a-ocean>
<!-- camera + cursor. -->
<a-camera id="camera" position="0 20 80 " fly wasd-controls-enabled="false">
<a-cursor fuse="false" id="cursor" color="black"></a-cursor>
</a-camera>
</a-scene>
<script>
document.querySelector("a-scene").enterVR();
</script>
</body>
</html>
回答1:
Looking at Don's universal controls, he's registering the touch events on the canvas. Borrowing from his code, you could try something like:
AFRAME.registerComponent("start-click", {
init: function() {
const sceneEl = this.el.sceneEl
const canvasEl = sceneEl.canvas
const camera = document.querySelector('a-camera')
this.isMoving = false
this.position = {x: 0, y: 20, z: 80}
canvasEl.addEventListener('touchstart', () => {
this.isMoving = true
})
canvasEl.addEventListener('touchend', () => {
this.isMoving = false
})
},
tick: function () {
if (this.isMoving) {
this.position.z -= 1
camera.setAttribute('position', this.position)
}
}
});
Here's the universal controls link for more info:
https://github.com/donmccurdy/aframe-extras/blob/master/src/controls/touch-controls.js
回答2:
The magnet switch on version 1 cardboard cannot be detected by a web browser. The screen-touch switch on version 2 can.
回答3:
I'm providing this as an answer because I don't have enough reputation to comment, but I'd like to throw this out here: You might need to use an API to track the magnetic input
Also, I tried Noam Almosnino's demo with a Pixel & Cardboard, and it only registered touch input, but not the magnetic input, as expected. I don't think that Don McCurdy's universal-controls are sufficient for tracking the magnetic switch. You could consider this alternative, also provided by Don McCurdy. I'm sorry I couldn't give you a complete answer, but I hope that this helps you in some way.
来源:https://stackoverflow.com/questions/48843601/aframe-cardboard-button-magnet-click-does-not-trigger