用three.js创建一个简易的天空盒

要创建一个简易的天空盒，可以使用three.js的CubeTextureLoader和BoxGeometry。首先，你需要准备六张图片，分别对应天空盒的六个面。可以使用任何图片编辑器，比如Photoshop或GIMP。这些图片应该是正方形的，并且宽高比为1:1。

然后，你需要使用CubeTextureLoader加载这些图片。这个加载器会返回一个CubeTexture对象。将这个对象传递给场景的background属性，就可以将其用作天空盒的背景了。

最后，你需要创建一个BoxGeometry，用于渲染天空盒。将这个几何体放在场景的中心，并应用天空盒材质。这样，天空盒就可以出现在场景中了。

下面是示例代码：

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 准备六张图片
const urls = [
  'right.png',
  'left.png',
  'top.png',
  'bottom.png',
  'front.png',
  'back.png',
];

// 使用CubeTextureLoader加载图片
const loader = new THREE.CubeTextureLoader();
const texture = loader.load(urls);

// 将CubeTexture用作场景的背景
scene.background = texture;

// 创建一个BoxGeometry
const geometry = new THREE.BoxGeometry(100, 100, 100);

// 创建一个天空盒材质
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  envMap: texture,
});

// 创建一个Mesh，并应用天空盒材质
const cube = new THREE.Mesh(geometry, material);

// 将Mesh放在场景中心
cube.position.set(0, 0, 0);

// 将Mesh添加到场景中
scene.add(cube);

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

animate();

在这个示例代码中，我们使用了CubeTextureLoader加载了六张图片，并将其用作场景的背景。然后，我们创建了一个BoxGeometry和一个天空盒材质，并将其应用到一个Mesh上。最后，我们将这个Mesh添加到场景中，并在渲染循环中进行渲染。