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

好的，以下是用three.js创建一个简易的天空盒的步骤：

1. 首先，创建一个场景和一个相机：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
scene.add(camera);

2. 创建一个立方体几何体，将其缩放为无限远的距离（这是为了让相机永远在立方体的中心）：

var geometry = new THREE.BoxGeometry(1000, 1000, 1000);
geometry.scale(1, 1, -1);

3. 加载6个纹理图片，每个图片表示天空盒的一个面，创建一个立方体贴图材质，并将纹理图片添加到材质中：

var material = new THREE.MeshBasicMaterial({
  map: [
    new THREE.TextureLoader().load('right.jpg'),
    new THREE.TextureLoader().load('left.jpg'),
    new THREE.TextureLoader().load('top.jpg'),
    new THREE.TextureLoader().load('bottom.jpg'),
    new THREE.TextureLoader().load('front.jpg'),
    new THREE.TextureLoader().load('back.jpg')
  ],
  side: THREE.BackSide
});

4. 用立方体几何体和立方体贴图材质创建一个网格，并将其添加到场景中：

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

5. 最后，创建一个渲染器并将其添加到页面中：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

完成后，你就可以看到一个简易的天空盒了。完整的代码如下：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
scene.add(camera);

var geometry = new THREE.BoxGeometry(1000, 1000, 1000);
geometry.scale(1, 1, -1);

var material = new THREE.MeshBasicMaterial({
  map: [
    new THREE.TextureLoader().load('right.jpg'),
    new THREE.TextureLoader().load('left.jpg'),
    new THREE.TextureLoader().load('top.jpg'),
    new THREE.TextureLoader().load('bottom.jpg'),
    new THREE.TextureLoader().load('front.jpg'),
    new THREE.TextureLoader().load('back.jpg')
  ],
  side: THREE.BackSide
});

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

注意：上述代码中的纹理图片需要放在与index.html同级的文件夹下，并且需要根据实际情况修改文件名和路径。