0

I have a custom object which is a subtraction of two meshes. This subtraction creates a frame-like object.

createFrame (x, y, z) {
    const frameMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
    frameMesh.scale.set(x, y, z);
    const smallerFrameMesh = frameMesh.clone()
    smallerFrameMesh.scale.set(x - 4, y - 4, z);

    // subtraction
    const frameGeometry = fromCSG(toCSG(frameGeometry).subtract(toCSG(smallerFrameMesh)));

    const frame = new THREE.Mesh(frameGeometry, new THREE.MeshStandardMaterial(0xffffff));
    frame.geometry.computeVertexNormals();
    frame.userData.isFrame = true;

    return frame;
}

Now, I'm scaling this frame dynamically whenever the size changes. The problem is that using .scale only make my object stretch while I want it to preserve the width of the frame (which is 4 in this case).

Is it possible to specify how the object should be scaled (like writing my own implementation of the scale function) or is there a property/method to use which would result in preserving the "white space" vs. "object" portion? Thank you in advance.

Dawid Zbiński
  • 5,521
  • 8
  • 43
  • 70

1 Answers1

1

The scale() method transforms every vertex equally by multiplying their positions. So if you have the inner edge of the frame at x=6, and the outer edge at x=10, scaling it by 2 would give you inner: x=12, outer: x=20, making the frame 8 units wide.

To alleviate this, you could separate your frame into 4 different boxes: top, bottom, left and right. When you want to scale it in the x-axis, you can stretch top & bottom, and simply move the left and right edges. That way you maintain the thickness of 4:

The inverse can be done when you want to scale on the y-axis. You stretch the left & right boxes, then move the top & bottom so they line up.

M -
  • 26,908
  • 11
  • 49
  • 81
  • This is what I was thinking of implementing. The thing is that I have multiple "frames" like that (let's say at least 20), which needs to be scaled and each one is scaled differently, that's why I was thinking about rewriting the scale function for it, so I can maybe manipulate the way it deals with vertices. I guess I won't have any chance to do it by myself, so your solution may be the only one. – Dawid Zbiński Feb 18 '19 at 20:08