Javascript Three.js：将子对象保持在父网格下方

我试图在Three.js中创建一个表，但是表的腿穿过父级。

父网格：

    const boxWidth = 2; const boxHeight = 0.1; const boxDepth = 1;
    const tableBoardGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    const textureLoader = new THREE.TextureLoader();
    const customPicture = textureLoader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
    const tableBoardMaterial = new THREE.MeshLambertMaterial({map: customPicture})
    const tableBoard = new THREE.Mesh(tableBoardGeometry, tableBoardMaterial)
    tableBoard.position.set(0, 0, 0)

将（桌腿）浸入水中

两者之间的关系

    const group = new THREE.Group();
    tableBoard.add(tableLeg1, tableLeg2, tableLeg3, tableLeg4);
    scene.add(tableBoard);

如何使桌腿始终位于桌子下方？

创建一个具有宽度、高度和深度的对称长方体，其中长方体的中心位于（0，0，0）

如果桌子的盘子应该在腿的顶部，那么你必须改变盘子的y位置，改变腿的一半高度和盘子的一半高度（1.0/2+0.1/2=0.55）：

const-boxWidth=2；const-boxHeight=0.1；常数boxDepth=1；
const tableBoardGeometry=新的3.BoxGeometry（boxWidth、boxHeight、boxDepth）；
// ...
const tableBoard=新的三个网格（tableBoard几何体、tableBoard材质）；
桌板。位置。设置（0,0.55,0）；

如果希望腿的底部为0.0，则必须将腿“抬起”0.5，将板“抬起”1.05：

const tableBoard=新的三点网格（tableBoardGeometry，tableBoardMaterial）
桌板.位置.设置（0,1.05,0）

const tablegsgeometry=新的三箱几何（0.05,1,0.05）；
常数tableLeg1=新的三网格（TableLegGeometry，TableLegMaterial）
// ...
表1.位置设置（0.9,0.5，-0.4）
// ...

这真的是解决这一问题的最佳实践方法吗？用简单的数学？没有别的办法吗？无论你的方法如何，非常感谢@阿拉斯托萨巴依，你还想找什么别的路？定义形状和位置的是“您的”几何体。当然，您可以获取每个零件的边界框（AABB），进行一些相交测试，并实现将零件放置在其位置的算法。但即使这样，您也必须定义“规则”来放置几何体的各个部分。定义一个3D对象几乎是一个数学问题，或者你必须用搅拌器之类的工具创建（绘制）几何体，然后从文件中加载。或者你可以使用ammo.js，让棋盘“落”在腿上；-）

    const group = new THREE.Group();
    tableBoard.add(tableLeg1, tableLeg2, tableLeg3, tableLeg4);
    scene.add(tableBoard);