Adding multiple models with tap-place.js

Questions
#1

Hi there,

I’ve been trying to get this logic to spawn multiple .glb models when I tap the ground, but so far I’ve been struggling to make this happen, as it seems that everytime it always spawns the model that is referenced later in the code, ignoring everything behind it.

I’m new to this language so I’m not sure where the logic stops making sense. :S

Does anyone have any suggestions?
This is what I have it set to atm:

// Component that places Jakes where the ground is clicked

export const tapPlaceComponent = {
  init() {
    const ground = document.getElementById('ground')
    ground.addEventListener('click', (event) => {
      // Create new entity for the new object
      const newElement = document.createElement('a-entity')

      // The raycaster gives a location of the touch in the scene
      const touchPoint = event.detail.intersection.point
      newElement.setAttribute('position', touchPoint)

      const randomYRotation = Math.random() * 360
      newElement.setAttribute('rotation', `0 ${randomYRotation} 0`)

      newElement.setAttribute('visible', 'false')
      newElement.setAttribute('scale', '0.0001 0.0001 0.0001')

      newElement.setAttribute('shadow', {
        receive: false,
      })

      newElement.setAttribute('gltf-model', '#JakeModel')
      newElement.setAttribute('gltf-model', '#FinnModel')
      this.el.sceneEl.appendChild(newElement)

      newElement.addEventListener('model-loaded', () => {
        // Once the model is loaded, we are ready to show it popping in using an animation
        newElement.setAttribute('visible', 'true')
        newElement.setAttribute('animation', {
          property: 'scale',
          to: '7 7 7',
          easing: 'easeOutElastic',
          dur: 800,
        })
      })
    })
  },
}
#2

did not understand clearly

is it similar to this ? three.js examples

also three js rotation is in radians , so use

Math.random() *  (Math.Pi*2)
#3

When I tap, the code puts newElement.setAttribute(‘gltf-model’, ‘#FinnModel’) on the scene, but not the Jake model.
Even though I have them both as a new element, or am I missing something in the code to make it so that when one is already one the scene, it should make sure that the next 3d object hasnt been spawned yet?

Maybe that makes it a bit clearer?

#4

oh, the way they have written is to handle one object per tap,since it loading one object ,the second object’s load call is blocked

you will have to manipulate the file to support multiple models

or

combine models in a 3d software

or

use three js and webxr directly and write your own logic
https://threejs.org/examples/?q=xr#webxr_ar_cones
https://threejs.org/examples/?q=xr#webxr_ar_hittest