A-Frame: mouseenter/mouseleave for parent entity only
Question
I have a 'target-circle' component which is a simple circle with a ring outside it. I'm trying to get mouseenter and mouseleave events for the entire component, but the event listeners attached to the parent element fire for the child entities and only when the raycaster hits something.
I've attempted various ways to put invisible hit-testing circles/rings to try and alleviate the problem, but they all have the core issue that multiple enter/leave events are fired for child entities.
Is it feasible/what is the best way to only get events for entering/leaving the entire parent entity?
Demo: https://output.jsbin.com/tucuxas/quiet
<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script> AFRAME.registerComponent('target-circle', { schema: { position: {type: 'vec3', default: {x: 0, y: 0, z: 0}} }, init: function() { var el = this.el; el.setAttribute('position', this.data.position); el.object3D.lookAt(new THREE.Vector3(0, 0, 0)); var outerRing = document.createElement('a-entity'); outerRing.setAttribute('class', 'outerRing'); outerRing.setAttribute('material', { color: 'black' }); outerRing.setAttribute('geometry', { primitive: 'ring', radiusInner: '1.2', radiusOuter: '1.4' }); var innerCircle = document.createElement('a-entity'); innerCircle.setAttribute('class', 'innerCircle'); innerCircle.setAttribute('material', { color: 'black' }); innerCircle.setAttribute('geometry', { primitive: 'circle', radius: '0.3' }); el.appendChild(outerRing); el.appendChild(innerCircle); el.addEventListener('mouseenter', function() { console.log('mouseenter'); }); el.addEventListener('mouseleave', function() { console.log('mouseleave'); }); } }); </script> </head> <body> <a-scene> <a-entity target-circle='position: 0 3 -10'></a-entity> <a-entity camera look-controls> <a-entity id="cursor" cursor="fuse: false;" material="color: black; shader: flat;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.001; radiusOuter: .005; "></a-entity> </a-entity> </a-scene> </body> </html>
3 answers
solution1
1 ACCPTED 2017-07-12 16:42:06
Although SamB's anwser is correct in this case, I'm not sure if blocking the pointer-events in css will work on all raycasters ( even though it should ), here is my idea of wrapping the children in a container entity, just for the raycast:
Because Your entire entity consists of a ring, and a small circle inside, the parent entity is just an empty holder for the child entities.
The mouseleave event fires when you leave the ring, because between the ring, and the circle, there is literally nothing. If You want to fill in the space ( in 2D ), You need to either:
- Create a child entity, which will be an invisible circle with the radius of the outer ring. Invisible means
opacity = 0, notvisible = false( for the visible attribute is responsible for the rendering, not visibility ), and place it in front of the other children. - Make the parent entity a circle primitive, with the same attributes as described above.
If You want to fill it in 3D space, instead of a circle, create an invisible cylinder, paper thin, just so it could block the raycasts from all sides.
Working fiddle here .
solution2
1 2017-07-12 16:45:16
在您的CSS类的innerCircle和externalCircle中，添加以下属性
pointer-events: none;
solution3
0 2018-05-27 20:10:35
An updated solution for A-Frame 0.8.0:
- Create a transparent
a-circleas the parent - Add the
a-ringas a child of thea-circle - Add
raycaster="objects: a-circle (and comma-separated selectors of any other elements you need the cursor to interact with in the scene); recursive: false"to the cursor entity in your scene
The raycaster component settings here will prevent your cursor from intersecting with elements in the scene other than the ones whose selectors match what's listed in the objects property, as well as limiting the intersections to the top-level element that matches, ignoring all descendents.
More on the raycaster component: https://github.com/aframevr/aframe/blob/master/docs/components/raycaster.md
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.