ThreeJS中如何将一个物体放置在另一个物体上方？

不用手动输入坐标的话，ThreeJS官方推荐两种常用方案，核心都是利用模型的空间信息或场景层级来自动定位：

方案一：通过边界盒（BoundingBox）自动计算位置 #

这种方法适合没有预设锚点的模型，通过计算两个物体的包围盒来确定位置：

1. 先保存加载后的模型引用（原代码里加载后直接添加到场景，没有保存变量，需要修改）：

let cupModel;
let laptopModel;

// 加载杯子
loader.load('assets/models/Cup.glb', (gltf) => {
    cupModel = gltf.scene;
    scene.add(cupModel);
    // 两个模型都加载完成后执行放置逻辑
    if (laptopModel) placeCupOnLaptop();
});

// 加载笔记本
loader.load('assets/models/Laptop.glb', (gltf) => {
    laptopModel = gltf.scene;
    scene.add(laptopModel);
    if (cupModel) placeCupOnLaptop();
});

2. 编写放置逻辑函数，利用Box3计算包围盒：

function placeCupOnLaptop() {
    // 计算笔记本的整体包围盒（包含所有子物体）
    const laptopBounds = new THREE.Box3().setFromObject(laptopModel);
    // 计算杯子的整体包围盒
    const cupBounds = new THREE.Box3().setFromObject(cupModel);

    // 笔记本顶部的Y坐标
    const laptopTopY = laptopBounds.max.y;
    // 杯子自身坐标系下的底部Y坐标
    const cupBottomLocalY = cupBounds.min.y;

    // 杯子需要设置的Y位置：让杯子底部刚好贴合笔记本顶部
    const cupTargetY = laptopTopY - cupBottomLocalY;

    // 让杯子和笔记本的X、Z轴位置对齐（可根据需求调整）
    cupModel.position.x = laptopModel.position.x;
    cupModel.position.z = laptopModel.position.z;
    cupModel.position.y = cupTargetY;
}

后续要移动杯子时，直接修改cupModel.position即可，它是独立的场景节点，不会影响笔记本的位置。

方案二：利用模型内预设的锚点（更灵活） #

如果你的3D建模软件（比如Blender）里，已经在笔记本的目标位置（比如键盘上方）创建了一个空对象作为锚点（命名为cupAnchor），可以直接将杯子作为这个锚点的子物体，无需计算坐标：

function placeCupOnLaptop() {
    // 从笔记本模型中找到预设的锚点对象
    const cupAnchor = laptopModel.getObjectByName('cupAnchor');
    if (cupAnchor) {
        // 将杯子添加为锚点的子物体，自动继承锚点的位置
        cupAnchor.add(cupModel);
        // 可根据需求调整杯子在锚点内的相对位置
        cupModel.position.set(0, 0.1, 0); // 稍微抬高一点避免贴合过紧
    }
}

这种方法的优势是：移动笔记本时，杯子会自动跟随移动，适合需要保持相对位置的场景，也是ThreeJS官方推荐的场景层级管理方式。

内容的提问来源于stack exchange，提问作者realhuman