WebGL 绘制天空场景，打造沉浸式 3D 体验

2023-11-04 20:21:54

了解如何使用 three.js 创建令人惊叹的天空场景，让你的项目充满生机和真实感。通过利用 WebGL 的强大功能，你可以渲染逼真的天空，以增强沉浸感并创造令人难忘的用户体验。

场景初始化

场景初始化是创建 three.js 场景的基础。在这里，我们设置渲染器、场景和相机。渲染器负责将场景渲染到画布上，场景是包含所有对象和光源的容器，相机定义了场景的视点。

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

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

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

天空盒

天空盒是创建逼真天空效果的关键。它是一个包裹场景的立方体，包含天空纹理。这给了观众一种身临其境的体验，让他们感觉被天空包围着。

// 加载天空盒纹理
const skyboxTexture = new THREE.CubeTextureLoader().load([
  'posx.jpg',
  'negx.jpg',
  'posy.jpg',
  'negy.jpg',
  'posz.jpg',
  'negz.jpg'
]);

// 创建天空盒
const skybox = new THREE.BoxGeometry(1000, 1000, 1000);
const skyboxMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  envMap: skyboxTexture,
  side: THREE.BackSide
});

const skyboxMesh = new THREE.Mesh(skybox, skyboxMaterial);
scene.add(skyboxMesh);

照明

照明对于营造场景的氛围和逼真度至关重要。在天空场景中，通常使用环境光来模拟太阳或天空的光照。

// 创建环境光
const ambientLight = new THREE.AmbientLight(0x666666);
scene.add(ambientLight);

纹理

纹理可以极大地提高天空场景的真实感。可以通过将云纹理或星星纹理添加到天空盒来实现这一点，从而增加细节和深度。

// 加载云纹理
const cloudTexture = new THREE.TextureLoader().load('clouds.jpg');

// 将云纹理添加到天空盒
skyboxMaterial.map = cloudTexture;

高级技巧

为了进一步增强天空场景，可以添加高级技巧，例如移动云层和动态照明。

// 移动云层
const cloudSpeed = 0.001;
function animateClouds() {
  cloudTexture.offset.x += cloudSpeed;
  cloudTexture.offset.y += cloudSpeed;
  cloudTexture.needsUpdate = true;
}

// 动态照明
const timeOfDay = 0;
function updateLighting() {
  ambientLight.color.setHSL(timeOfDay / 24, 0.5, 0.5);
}