Customise scaling of height and width

Hi, I was wondering if we can do customise scaling of the height and width for the 3d model indivdually, i have tried adding threefingermove and fourfingermove for customising the width and height respectively. However, it seems like not working due to the scaling calculation for the change of model size.

This is the part for the init:

init: function () {
    this.customScaleHorizontal = this.customScaleHorizontal.bind(this);
    this.customScaleVertical = this.customScaleVertical.bind(this);
    this.handleScale = this.handleScale.bind(this);
    this.handleRotation = this.handleRotation.bind(this);

    this.initialScale = this.el.object3D.scale.clone();
    this.scaleFactor = 1;
  },

This is the part for updating the eventlistener:

update: function () {
    if (this.data.enabled) {
        this.el.sceneEl.addEventListener("onefingermove", this.handleRotation);
        this.el.sceneEl.addEventListener("twofingermove", this.handleScale);
        this.el.sceneEl.addEventListener("threefingermove", this.customScaleHorizontal);
        this.el.sceneEl.addEventListener("fourfingermove",this.customScaleVertical);

    } else {

        this.el.sceneEl.removeEventListener("onefingermove", this.handleRotation);
        this.el.sceneEl.removeEventListener("twofingermove", this.handleScale);
        this.el.sceneEl.removeEventListener("threefingermove", this.customScaleHorizontal);
        this.el.sceneEl.removeEventListener("fourfingermove", this.customScaleVertical);

    }
  },

This is the part for removing the eventlistener:

remove: function () {
    this.el.sceneEl.removeEventListener("onefingermove", this.handleRotation);
    this.el.sceneEl.removeEventListener("twofingermove", this.handleScale);
    this.el.sceneEl.removeEventListener("threefingermove", this.customScaleHorizontal);
    this.el.sceneEl.removeEventListener("fourfingermove", this.customScaleVertical);

  },

This is the part for customizing the width:

customScaleHorizontal: function (event) {
     this.scaleFactor *=
      1 + event.detail.spreadChange / event.detail.startSpread;

    this.scaleFactor = Math.min(
       Math.max(this.scaleFactor, this.data.minScale),
       this.data.maxScale
     );

    this.el.object3D.scale.x = this.scaleFactor * this.initialScale.x;
    this.el.object3D.scale.y = this.el.object3D.scale.y;
    this.el.object3D.scale.z = this.el.object3D.scale.z;

   },

This is the part for customizing the height:

customScaleVertical: function (event) {
      this.scaleFactor *=
        1 + event.detail.spreadChange / event.detail.startSpread;

      this.scaleFactor = Math.min(
        Math.max(this.scaleFactor, this.data.minScale),
        this.data.maxScale
      );

      this.el.object3D.scale.x = this.el.object3D.scale.x;
      this.el.object3D.scale.y = this.scaleFactor * this.initialScale.y;
      this.el.object3D.scale.z = this.el.object3D.scale.z;
    },

And this is the only part i have changed for gesture-detector part:

getEventPrefix(touchCount) {
        const numberNames = ["one", "two", "three", "four"];

        return numberNames[Math.min(touchCount, 4) - 1];
    }

I’m not sure whether is my logic wrong or what, please help me. Thank you!

[fcor]

You are calculating the current value of x correctly: this.el.object3D.scale.x. Could you try adding the scale factor instead of multiplying it? At least this whay it will always increase x by the same value on each iteration. I’m not sure how good it will be but worth trying 😃

Other option could be reducing the impact of finger movement on the scale factor, which could be different depending on how many fingers you use for the gesture event. Something like this.scaleFactor *= 1 + (event.detail.spreadChange/event.detail.startSpread) * 0.5;.

I think the issue with using the current x value is that if we multiply it by some factor, it will increase or decrease too fast since gesture events are too sensitive and could run multiple times for a single touch.

Finally, just in case you want to dig deeper, in three.js scale is a Vector3, so you have acces to all this properties/functions: https://threejs.org/docs/#api/en/math/Vector3

Hope this helps!

[fcor]

This one: https://modelviewer.dev/

Hope it helps