three.js 如何做昼夜切换

要实现 three.js 的昼夜切换，需要进行以下步骤：

1. 创建两个场景，一个表示白天，一个表示夜晚。

2. 创建两个光源，一个表示白天的太阳，一个表示夜晚的月亮或星星。

3. 创建两个天空盒，一个表示白天的天空，一个表示夜晚的星空。

4. 在切换时，将白天场景的光源和天空盒隐藏，夜晚场景的光源和天空盒显示。

5. 为了过渡平滑，可以使用 Tween.js 库来实现光源和天空盒的渐变效果。

示例代码：

// 创建白天场景
var dayScene = new THREE.Scene();

// 创建夜晚场景
var nightScene = new THREE.Scene();

// 创建白天光源
var sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(0, 100, 0);
dayScene.add(sun);

// 创建夜晚光源
var moon = new THREE.PointLight(0xffffff, 0.5);
moon.position.set(0, 100, 0);
nightScene.add(moon);

// 创建白天天空盒
var daySkybox = new THREE.Mesh(
  new THREE.BoxGeometry(10000, 10000, 10000),
  new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture('day_skybox.jpg'),
    side: THREE.BackSide
  })
);
dayScene.add(daySkybox);

// 创建夜晚天空盒
var nightSkybox = new THREE.Mesh(
  new THREE.BoxGeometry(10000, 10000, 10000),
  new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture('night_skybox.jpg'),
    side: THREE.BackSide
  })
);
nightScene.add(nightSkybox);

// 切换到夜晚
function switchToNight() {
  var tween = new TWEEN.Tween(sun)
    .to({ intensity: 0 }, 1000)
    .onComplete(function() {
      daySkybox.visible = false;
      nightSkybox.visible = true;
      moon.intensity = 0;
      var tween2 = new TWEEN.Tween(moon)
        .to({ intensity: 0.5 }, 1000)
        .start();
    })
    .start();
}

// 切换到白天
function switchToDay() {
  var tween = new TWEEN.Tween(moon)
    .to({ intensity: 0 }, 1000)
    .onComplete(function() {
      nightSkybox.visible = false;
      daySkybox.visible = true;
      sun.intensity = 0;
      var tween2 = new TWEEN.Tween(sun)
        .to({ intensity: 1 }, 1000)
        .start();
    })
    .start();
}