控制定制的几何形状的three.js所缩放(Controlling the scaling of c

我有一个自定义的对象，它是两个网格的减法。 该减法创建的框状的对象。

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在这种情况下）。

是否可以指定对象应当如何缩放（如写我自己的实现规模功能）或者是有一个属性/方法来使用，这将导致保留“空白”与“对象”部分？ 先感谢您。

Answer 1:

的scale()方法通过乘以其位置上均匀地转换的每个顶点。 因此，如果你有所述帧的内缘x=6 ，和外边缘在x=10 ，由2缩放它将给你内： x=12 ，外： x=20 ，使得帧宽8个单位。

为了缓解这一点，你可以在你的帧分成4个不同的盒子：上，下，左，右。 当你想扩展它在x轴，可以舒展顶部和底部，而只需移动左，右边缘。 你保持的4厚度的方法：

当你想扩展在y轴逆可以做到的。 你伸展左，右框，然后将顶部和底部，使他们排队​​。

文章来源: Controlling the scaling of custom geometries in Three.js