如何正确地使用10个A球的A框架进行合并 [英] How is properly to make pool with 10 <a-sphere>s A-frame

问题描述

有一个任务:创建10个球体对象， 把它们放在游泳池里；每次点击都会从池中获得每个球体 并在光标相交点向用户显示.

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>

创建池:

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 (){
    }
})

也许是我，但不知道怎么做 尚无obj的明确示例.在文档中创建.仅用于从池中获取对象 请查看: https://github.com/aframevr/aframe /blob/master/docs/components/pool.md

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

推荐答案

我不确定问题是关于<a-sphere>池，还是在池化"它们之前创建对象，所以:

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

1)您不需要手动创建应该合并的对象.
2)池实体的模板"由mixin属性定义.任何组件(几何，材料，模型，自定义组件)都需要在给定的混合中定义.

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>

池组件将已经创建10个<a-entity> ies，全部使用#ball 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)

在此小提琴中进行检查.

这篇关于如何正确地使用10个A球的A框架进行合并的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！