How is properly to make pool with 10 s A-frame

问题:

Have a task: create 10 sphere objects, put them in pool; on each click got each sphere from pool and show to user at cursor intersection point.

Problem: can't figure how to properly create and after this, put it to pool. Please check code below.

Currently each sphere create dynamicly like this: (in a-scene on click event)

    let {x, y, z} = event.detail.intersection.point
      sceneEl.insertAdjacentHTML('beforeend',
            `<a-sphere data-coords="[${x}, ${y}, ${z}]"  data-clickable position="${x} ${y} ${z}" radius="32.0" color="#eee"></a-sphere>`)
need in further work to get each a-sphere object from pool.

Layout:
<a-scene id="scene"  pool__sphere="mixin: sphere; size: 10"  main-scene class="ascene" cursor="rayOrigin: mouse" raycaster="zobjects: a-sky">

  ....
      <!-- Asset-s from them want to create each a-sphere -->  

            <a-assets>
                  <a-mixin id="gray" color="#eee"  ></a-mixin>
                    <a-mixin id="radius" radius="32.0"  ></a-mixin>
                    <a-mixin id="sphere" geometry="primitive: sphere"></a-mixin>
            </a-assets>

Pool creation:

AFRAME.registerComponent('main-scene', {
    init() {
        //here maybe needed to create each a-sphere object
        //end add each to pool, 
        //then on each scene click, needed to get one by one sphere from pool

        //pool creation
        let sceneEl = this.el        
         var el = sceneEl.components
         sceneEl.play(); 

         //pool logs 10 empty objects {} if      console.log('pool with spheres', el.pool__sphere)


         el.pool__sphere.returnEntity(el);
         console.log('entity', el)
    },
    //     console.log('el', el)

    play (){
    }
})

Maybe it's me, but not got how exactly do it There no clear example for obj. creating in doc. only for object get from pool please look: https://github.com/aframevr/aframe/blob/master/docs/components/pool.md

回答1:

I'm not sure if the question is about <a-sphere> pools, or creating objects before "pooling" them, so:

1) You don't need to manually create the objects which are supposed to be pooled.
2) The "template" for the pooled entites is defined by the mixin attribute. Any component (geometry, material, models, custom ones) needs to be defined within the given mixin.

Source code here. So, with a simple declaration:

<a-scene pool__spheres='mixin: ball; size: 10'>
  <a-assets>
    <a-mixin id="ball" geometry='primitive: sphere' material="color: red">
  </a-mixin>

the pool component will already create 10 <a-entity>ies, all using the #ball mixin.

---

You only need to grab the entities from the pool on click:

this.el.addEventListener('click', e => {
   let pool = this.el.sceneEl.components["pool__spheres"]
   let sphere = pool.requestEntity();
});

and return them to the pool at some point:

let pool = this.el.sceneEl.components["pool__spheres"]
pool.returnEntity(this.el)

Check it out in this fiddle.