Complex user interactions - can they be done?

Technical Support
1

Hello. We have created an app for our client that let’s users place an articulated monitor arm on a desk and rotate, raise and lower the elements at the pivot points through on-screen buttons. I’m trying to push the client towards a webAR solution and away from the current App store/Play store downloadable format. Is it possible to incorporate complex interactions like this on this platform? Previously built/coded in Unity/C# so just want to know if I’ll be able to recreate it here. None of the project library samples seem to have anything like that.

2

Check out our xrextras-gesture-detector component (used in A-Frame: Manipulate 3D Model | 8th Wall | 8th Wall , for example).

You can use it for things like hold-drag, one/two finger rotate, pinch scale, etc.

This sample project also adds the concept of object section before manipulating the object:

2 Likes
3

To learn more about what it’s doing, you can find all of the source code for xrextra-gesture-detector and related components at web/xrextras/src/aframe/components/gestures-components.ts at master · 8thwall/web · GitHub

4

Hey i’m new here. whats the concept behind is DOM and ECS

5

Hi, welcome to the forum!

In the future please make a new thread for your questions instead of asking them in old threads.

DOM = Document Object Model, it’s the webpage.
ECS = Design Pattern / Architecture pattern for software.

6

Hello, I have a question about your code for positioning an object.

I’ve modified it: I removed the scale and rotation parts. I can select the object fine, but I’m unable to move/position it. I’m using absolute scale. Any idea what might be wrong

This is the code I’m using:

const gestureSelectorComponent = {

selectedModel: null,

schema: {

addHoldDrag: {default: true},

riseHeight: {default: 0.7},

addHighlight: {default: false},

},

init() {

const self = this



if (this.data.addHoldDrag) {

  this.el.setAttribute('xrextras-hold-drag', 'riseHeight', this.data.riseHeight)

}



this.el.addEventListener('mousedown', (event) => {

  if (self.constructor.selectedModel) {

    self.removeGestures(self.constructor.selectedModel)

  }

  self.addGestures(event.currentTarget)

  self.constructor.selectedModel = event.currentTarget

})

},

removeGestures(entity) {

entity.setAttribute('highlight', 'enabled', false)

},

addGestures(entity) {

const {data} = this

if (data.addHighlight) {

  entity.setAttribute('highlight', 'enabled', true)

}

},

}

export {gestureSelectorComponent}