在 Three.js 中控制自定义几何图形的缩放 [英] 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;
}

现在，每当大小发生变化时，我都会动态缩放此框架.问题是使用 .scale 只会使我的对象拉伸，而我希望它保留框架的宽度(在这种情况下为 4).

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.

推荐答案

scale() 方法通过将每个顶点的位置相乘来相等地变换每个顶点.因此，如果帧的内边缘位于 x=6，外边缘位于 x=10，则将其缩放 2 将得到内部:x=12，外层:x=20，使框架宽度为 8 个单位.

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.

为了缓解这种情况，您可以将框架分成 4 个不同的框:顶部、底部、左侧和右侧.当你想在 x 轴上缩放它时，你可以拉伸 top &底部，只需移动左右边缘即可.这样你就可以保持 4 的厚度:

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:

当您想在 y 轴上缩放时，可以执行相反的操作.你伸展左边 &右框，然后移动顶部 &底部所以他们排队.

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.

这篇关于在 Three.js 中控制自定义几何图形的缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！