问题
I am trying to attach a cursor listener to a sky element (equirectangular image as texture mapped to sphere) in A-Frame. The ultimate goal is to get the 2D coordinates of the texture at the point the cursor intersects with the sphere on click. However, I currently can't get the click event to fire at all. Any thoughts?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World! - A-Frame</title>
<meta name="description" content="Hello, World! - A-Frame">
<script src="aframe.js"></script>
<script type="text/javascript">
window.onload = function () {
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function () {
console.log('I was clicked!');
});
}
});
}
</script>
</head>
<body>
<a-scene>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-sky cursor-listener src="image.jpg"></a-sky>
</a-scene>
</body>
</html>
回答1:
The soon-to-be-released version of A-Frame has fixes that will expose the cursor UV intersection data in the click event. https://github.com/aframevr/aframe/tree/master/dist . First I recommend grabbing that.
The sky is far away so you need to extend the maxDistance of the raycaster.
<a-entity raycaster="maxDistance: 6000; objects: a-sky" cursor></a-entity>
https://aframe.io/docs/0.3.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component
来源：https://stackoverflow.com/questions/40555844/a-frame-cursor-listener-on-sky-element-not-firing