Three.js：让孩子在父网格下 [英] Three.js: Keeping child below parent mesh

问题描述

我正在尝试在Three.js中创建一个表，但是表的两边贯穿父级。

I'm trying to create a table in Three.js but the legs of the table goes through the parent.

父网格：

    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 tableLegsGeometry = new THREE.BoxGeometry(0.05, 1, 0.05);
   const tableLegsMaterial = new THREE.MeshLambertMaterial(({map: customPicture}))
   const tableLeg1 = new THREE.Mesh(tableLegsGeometry, tableLegsMaterial)
   const tableLeg2 = new THREE.Mesh(tableLegsGeometry, tableLegsMaterial)
   const tableLeg3 = new THREE.Mesh(tableLegsGeometry, tableLegsMaterial)
   const tableLeg4 = new THREE.Mesh(tableLegsGeometry, tableLegsMaterial)
   tableLeg1.position.set(0.9, 0, -0.4)
   tableLeg2.position.set(-0.9, 0, -0.4)
   tableLeg3.position.set(-0.9, 0, 0.4)
   tableLeg4.position.set(0.9, 0, 0.4)

两者之间的关系

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

我如何使桌子的腿始终保持在桌子下方？

How do i make the legs of the table always stay below the table?

推荐答案

THREE.BoxGeometry 创建一个具有宽度，高度和深度的对称框，框的中心位于（0，0，0）。

THREE.BoxGeometry creates a symmetric box with a width, height and depth, where the center of the box is at (0, 0, 0).

如果桌子的盘子应该放在腿的顶部，则必须将盘子的y位置更改为腿的一半高度和一半盘子的高度（1.0 / 2 + 0.1 / 2 = 0.55）：

If the plate of the table should be on top of the legs, then you've to change the y position of the plate, by the half height of the leg and the half height of the plate (1.0/2 + 0.1/2 = 0.55):

const boxWidth = 2; const boxHeight = 0.1; const boxDepth = 1;
const tableBoardGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
// ...
const tableBoard = new THREE.Mesh(tableBoardGeometry, tableBoardMaterial);
tableBoard.position.set(0, 0.55, 0);

如果您希望腿的底部为0.0，则必须抬起腿数增加0.5，调色板数增加1.05：

If you want that the bottom of the legs is at 0.0, then you've to "lift up" the legs by 0.5 and the palte by 1.05:

const tableBoard = new THREE.Mesh(tableBoardGeometry, tableBoardMaterial)
tableBoard.position.set(0, 1.05, 0)

const tableLegsGeometry = new THREE.BoxGeometry(0.05, 1, 0.05);
const tableLeg1 = new THREE.Mesh(tableLegsGeometry, tableLegsMaterial)
// ...
tableLeg1.position.set(0.9, 0.5, -0.4)
// ...

这篇关于Three.js：让孩子在父网格下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！