Rotate/Hotspots/Tap on mobile

🧑‍💻 Technical Support
1

Hi! Sorry if this question is already posted, but I didn’t find it on the forum.
How can I achieve the user to rotate 3d object manually on their mobiles?
I have Image Target and a .glb model imported. When I scan the imagen, the model shows up correctly, and I can rotate my phone and get to see around the object (a food can), but I want the user to rotate manually the object and see all the hotspots and description. The hotspots will be “+” signs and when they tap on it, it’ll show some information.
I’m on Niantic Studio.
Thanks!!

2

Hi, welcome to the forums!

Here’s how I would do it:

Create a custom component and apply it to the object you want to rotate when the user clicks and drags anywhere on the screen.

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Rotate Gesture',
  schema: {
    sensitivity: ecs.f32,
  },
  schemaDefaults: {
    sensitivity: 10.0,
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    ecs.defineState('default')
      .initial()
      .listen(world.events.globalId, ecs.input.SCREEN_TOUCH_MOVE, (e) => {
        const {sensitivity} = schemaAttribute.get(eid)
        const angles = ecs.math.vec3.xyz(0, e.data.change.x * sensitivity * world.time.delta, 0)
        const rotation = ecs.math.quat.pitchYawRollDegrees(angles)

        world.transform.rotateLocal(eid, rotation)
      })
  },
})

3

Yes! That did it, thank you George!

1 Like