Controlling the scaling of custom geometries in Three.js

问题

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.

回答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.

来源：https://stackoverflow.com/questions/54750987/controlling-the-scaling-of-custom-geometries-in-three-js