如何在Three.js中让3D小屋模型随机定位在球面并正确贴合表面？

核心问题是第三方模型的局部坐标系和Three.js默认坐标系不匹配，导致直接用lookAt无法得到预期的贴合效果。以下是具体解决步骤：

1. 先修正模型的局部朝向 #

首先要确保模型的“底部”对齐到我们可控的轴（比如Three.js默认的-Y轴），可以借助AxesHelper查看模型的初始轴线方向：

// 添加轴线辅助，查看模型的X(红)、Y(绿)、Z(蓝)轴
const axesHelper = new THREE.AxesHelper(5);
cabinModel.add(axesHelper);

根据辅助线显示的方向，旋转模型让底部对应到-Y轴。比如如果模型原本前门朝Z轴正方向、底部朝X轴正方向，就执行：

// 绕X轴旋转90度，让底部朝下（对应-Y轴）
cabinModel.rotation.x = Math.PI / 2;

如果旋转后模型位置偏移，可以把模型放到一个Group容器里，后续操作容器组会更灵活。

2. 计算球面贴合的正确旋转 #

当模型局部朝向修正后，就可以让它稳定贴合球面：

• 先生成球面上的随机位置：用randomDirection()生成单位向量，乘以球半径得到目标位置
• 让模型的“上方向”（即修正后的底部反方向）指向球面径向向外的方向（从球心指向模型位置的向量）
• 可以绕径向轴随机旋转，让小屋前门朝向随机水平方向

示例代码：

const sphereRadius = sphere.geometry.parameters.radius;
// 生成随机球面位置
const randomDir = new THREE.Vector3().randomDirection();
const cabinPos = randomDir.multiplyScalar(sphereRadius);

// 设置模型位置
cabinModel.position.copy(cabinPos);

// 让模型的Y轴（上方向）指向径向向外的方向，底部贴合球面
const defaultUp = new THREE.Vector3(0, 1, 0);
cabinModel.quaternion.setFromUnitVectors(defaultUp, randomDir.normalize());

// 绕径向轴随机旋转，让前门朝向随机方向
cabinModel.rotateOnAxis(randomDir, Math.random() * Math.PI * 2);

为什么之前的lookAt无效？ #

Three.js的lookAt方法默认让模型的-Z轴指向目标点，同时保持Y轴向上。但第三方模型的“前门”（初始朝向）不一定对应-Z轴，所以直接用lookAt会导致模型翻转、侧躺。先修正模型局部坐标系，再通过四元数对齐径向方向，就能稳定实现贴合效果。

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