Scaling of 3d model on marker in a-frame

Question

I am loading 3d model on marker using a-frame. I want to know how I can do the dynamic scaling of a 3d model like when 3d model appears on marker how I can zoom in and out the 3d model. Please help me with this.

let me know if [this](https://stackoverflow.com/questions/50197836/looking-for-a-way-in-aframe-to-rotate-and-scale-a-model-via-touch-when-rendered) helps — Piotr Adam Milewski, Aug 27 '18 at 06:39
I tried but its not working can u please suggest another in a-frame — ANKUR SHARMA, Aug 27 '18 at 09:00
Please provide a code example and show what you have tried so far. Take a look at https://stackoverflow.com/help/how-to-ask to get more adequate answers. — sascha10000, Sep 22 '18 at 00:13

score 0 · Accepted Answer · edited Jul 09 '20 at 10:09

0

You can zoom in / out the 3d model by setting the scale attribute. Having your model within a reference let model = document.querySelector("#model"):

 model.setAttribute("scale", "2 2 2")

will enlarge it.

 model.setAttribute("scale", "0.5 0.5 0.5")

will make it smaller.

You can connect it with a mouse scroll, or any other event with addEventListener and change the scale according to the readings.

MouseWheel example:

window.addEventListener("wheel", (e) => {
    let scaleFactor = e.deltaY > 0 ? 0.9 : 1.1  //check if we scroll up, or down
    let scale = this.el.getAttribute("scale").clone() // clone the scale vector
    scale.multiplyScalar(scaleFactor)                 
    this.el.setAttribute("scale", scale)              // apply new scale
  })

live fiddle here.

edited Jul 09 '20 at 10:09

Liam

27,717
28
128
190

answered Aug 27 '18 at 09:09

Piotr Adam Milewski

14,150
3
21
42

thanks Adam , It worked One little help different gltf models have different scaling ,can I set the scaling before and then zooming option works. For eg: ---- it will show proper layout on marker After using zoom option , 3d object coming too small ,then after zooming i am able to see . Is there any way I can set initial scale and then I can do zooming – ANKUR SHARMA Aug 27 '18 at 11:00
You can set the scale like you did in the comment, but the initial size pretty much depends on the model size, as set in blender or maya – Piotr Adam Milewski Aug 27 '18 at 11:14
When i set the scale I am unable to zoom . – ANKUR SHARMA Aug 27 '18 at 11:22
Does it work in mobile also,like if i am scanning pattern from mobile ,with my touch it will zoom???? – ANKUR SHARMA Sep 05 '18 at 08:38
No ,I tried !! than i tried with another approach of adding event listener of touchmove and touchend which works for me. – ANKUR SHARMA Sep 24 '18 at 11:59

Scaling of 3d model on marker in a-frame

1 Answers1