three.js让n个模型以顺时针的水平方向摆放在一个长方形平面的四面

你可以使用 `THREE.Group` 对象来组合所有的模型，并使用 `THREE.PlaneGeometry` 创建一个长方形平面作为地面。然后，你可以通过设置每个模型的位置和旋转来将它们摆放在地面上。

以下是一个简单的示例代码：

// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2; // 将地面沿 X 轴旋转 90 度
scene.add(plane);

// 创建模型并添加到一个 group 中
const group = new THREE.Group();
for (let i = 0; i < n; i++) {
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  cube.position.x = Math.cos(i * 2 * Math.PI / n) * 3; // 计算每个模型的位置
  cube.position.z = Math.sin(i * 2 * Math.PI / n) * 3;
  cube.rotation.y = -i * 2 * Math.PI / n; // 计算每个模型的旋转角度
  group.add(cube);
}
scene.add(group);

// 设置相机位置
camera.position.z = 5;

// 渲染场景
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

在这个示例中，我们创建了一个长度为 `n` 的循环来创建 `n` 个盒子模型。我们将每个盒子的位置和旋转计算为：

cube.position.x = Math.cos(i * 2 * Math.PI / n) * 3;
cube.position.z = Math.sin(i * 2 * Math.PI / n) * 3;
cube.rotation.y = -i * 2 * Math.PI / n;

这将把每个盒子放在一个半径为 3，以原点为中心的圆周上，并将它们沿着圆周顺时针旋转。你可以根据需要调整这些参数来适应你的场景。