Question

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

问题：无法确定如何正确创建，然后将其放入池中。请检查下面的代码。

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

Answer 1

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

1）您不需要手动创建应该合并的对象。
2）池实体的“模板”由mixin属性定义。必须在给定的混合中定义任何组件（几何，材料，模型，自定义组件）。

源代码here。因此，只需一个简单的声明：

<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>实体，全部使用#ball混合。

您只需单击以下按钮即可从池中获取实体：

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

并在某些时候将它们返回池中：

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

在this小提琴中检查一下。

如何正确地使用10个<a-sphere>的A帧

1 个答案: