three.js 天空盒例子

以下是一个使用 SkyBox 实现天空盒的 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 textureLoader = new THREE.TextureLoader();
var skyboxTextures = [
  textureLoader.load('right.jpg'),
  textureLoader.load('left.jpg'),
  textureLoader.load('top.jpg'),
  textureLoader.load('bottom.jpg'),
  textureLoader.load('front.jpg'),
  textureLoader.load('back.jpg')
];

// 创建 SkyBox
var skybox = new THREE.Mesh(
  new THREE.BoxGeometry(10000, 10000, 10000),
  new THREE.ShaderMaterial({
    uniforms: {
      textureRight: { type: 't', value: skyboxTextures[0] },
      textureLeft: { type: 't', value: skyboxTextures[1] },
      textureTop: { type: 't', value: skyboxTextures[2] },
      textureBottom: { type: 't', value: skyboxTextures[3] },
      textureFront: { type: 't', value: skyboxTextures[4] },
      textureBack: { type: 't', value: skyboxTextures[5] }
    },
    vertexShader: document.getElementById('skyboxVertexShader').textContent,
    fragmentShader: document.getElementById('skyboxFragmentShader').textContent,
    side: THREE.BackSide
  })
);
scene.add(skybox);

// 创建一个立方体
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

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

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

在这个示例中，我们使用了 six-sided-skybox 贴图，通过加载并应用这些贴图到 SkyBox 中，实现了一个带有天空盒的场景。注意到我们还为 SkyBox 定义了自定义的着色器，这是为了将贴图应用到 SkyBox 上。

你可以在这个示例的源代码中找到着色器代码，并下载 six-sided-skybox 贴图来进行尝试。