How to control multiple models individually

[noffjin]

I use Cursor Place Ground ( https://www.8thwall.com/8thwall/placeground-cursor-aframe )

and I declared a-scene like

<a-scene 
  iframe-inner xrweb
  tap-place
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  >

and tap-place.js

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)
      newElement.setAttribute('rotation', `0 ${Math.random() * 360} 0`)
      newElement.setAttribute('visible', 'false')
      newElement.setAttribute('class', 'cantap')
      newElement.setAttribute('xrextras-hold-drag', '')
      newElement.setAttribute('xrextras-two-finger-rotate', '')
      newElement.setAttribute('xrextras-pinch-scale', '')
      
      newElement.setAttribute('scale', '0.0001 0.0001 0.0001')
      newElement.setAttribute('shadow', {receive: false,})
      newElement.setAttribute('gltf-model', model)
      this.el.sceneEl.appendChild(newElement)

xrextras-hold-drag : working well
xrextras-two-finger-rotate: rotate all objects
xrextras-pinch-scale: when I scale object that getting invisible on the ground

I want

1. rotate individualy
2. scale individualy well

[atomarch]

To rotate objects individually, you'd need to implement some type of "select" mechanism to determine which object you want to rotate. The way it was currently written (see https://github.com/8thwall/web/blob/master/xrextras/src/aframe/xr-components.js#L403-L418) any entity with that has the xrextras-two-finger-rotate component will rotate when you touch the screen.

As for your scale issue, you typically should add the xrextras-pinch-scale component after you have set the desired initial scale of the model, or pass it a scale parameter. In this component's init() it's saving the initial scale of the model, so if it's very small, it may look like it's disappearing, but really you are just scaling it relative to a very very small scale value.

Typically I add this after the model-loaded event has fired: https://www.8thwall.com/8thwall/placeground-cursor-aframe/code/tap-place-cursor.js#L33