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

要创建一个简易的天空盒，你需要使用 three.js 库和一些天空盒纹理图片。

首先，创建一个场景、相机和渲染器，然后将渲染器添加到页面中：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

然后，加载天空盒纹理图片。在这个例子中，我们使用了一个包含六个面的立方体贴图，每个面都是一个不同的图片。你可以在网上找到很多这样的资源。

var loader = new THREE.CubeTextureLoader();
loader.setPath('textures/skybox/'); // 设置纹理图片的路径
var textureCube = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);
scene.background = textureCube;

最后，创建一个立方体几何体，并将其添加到场景中。

var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

完整的代码如下：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.CubeTextureLoader();
loader.setPath('textures/skybox/');
var textureCube = loader.load([
  'px.jpg', 'nx.jpg',
  'py.jpg', 'ny.jpg',
  'pz.jpg', 'nz.jpg'
]);
scene.background = textureCube;

var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 20;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

记得将 `textures/skybox/` 替换为你自己的图片路径。