在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).

是否可以指定对象的缩放比例(例如编写我自己的scale函数实现)，还是可以使用一种属性/方法来保存空白"与对象"部分?预先谢谢你.

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轴上缩放时，可以拉伸顶部&底部，只需移动左右边缘即可.这样，您可以保持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屋！