Loading multiple models

[matijafumic]

I am using ar.js with gestures.js to make a sneakers showroom. I preloaded my models and loaded them all to my scene when marker is found but one model is show, others are loaded with the scale of "0 0 0"... Added event listener (click) to switch between the models. Everytime the model is tapped, the scale for current model is set to "0 0 0" while the scale for the next model is set to "2 2 2". The problem I have is following: Every time I try to zoom in to the model using gestures, first model is zoomed, not the current "active" model. Funny thing is, I do not have the same problem for rotation. Moving my finger rotates the "active" model. The reason I loaded all the models at the same time is to reduce the time needed between model switching. If I get this correctly, my problem is that zooming scales all of the models at the same time but only first one is shown, or am I wrong? Likewise it rotates all the models at the same time but because their scale is set to "0 0 0" their rotation is not visible. Any tips please

[fcor]

Hi, I think you're right, that should be the reason. I had a similar issue implementing gestures on a multi marker app where I wanted to apply gestures to only one model/marker at once.

Instead of setting scale to "0 0 0" or "2 2 2" for displaying or not a single model, you could use visible="true" and visible="false". Here you cand find more information about it: https://aframe.io/docs/1.1.0/components/visible.html

The same way you enable/disable visibility based on which model is active or not, you can enable/disable gestures on a particular element/model using the enabled property. This way, you can ensure that gestures will only be applied to a specific element of your scene.

model1.setAttribute("gesture-handler", { enabled: false });
model2.setAttribute("gesture-handler", { enabled: true });

[matijafumic]

You are right. Thank you much. That's an easy fix

[matijafumic]

Final question. Can i reset my scale? I am using a box model on which I display the shoes. On tap, only the shoe changes, not the box. I then call box.setAttribute("scale", "2 2 2") and box.setAttribute("rotation", "0 0 0"); which temporarily changes the size. Then when i try to zoom into my model, box immediately switches to sizes previously put on with another shoe earlier in the app

[fcor]

Sounds like a bug. It would be great if you could share a working example to dig deeper :)

Could you try making the initial box size with width, height and depth? So your default box scale is 1 instead of 2? This way the scale would be only changed by the gesture handler. I think that could help to avoid weird behavior on initialScale in the meantime.

[matijafumic]

SOLVED: All I needed to do is reset the scaleFactor in gestures.js every time a model is not visible. I just added this to the update method of gesture-handler

if(this.el.getAttribute("visible") === false){ this.el.object3D.scale.set(1, 1, 1); this.el.object3D.rotation.set(0, 0, 0); this.scaleFactor = 1; }