使用Three.js实现首页图片3D视差效果

2024年9月29日

引言

在现代网页设计中，为首页添加引人注目的3D效果已经成为提升用户体验的重要手段。通过将平面图片转换为具有视差效果的3D场景，我们可以创造出更加生动、立体的视觉体验，吸引用户注意力并增强网站的交互性。本文将详细介绍如何利用Three.js和深度图技术实现这一效果。

核心原理

深度图（Depth Map）

深度图是实现图片3D效果的关键技术之一，它用于记录场景中每个像素的深度信息。在深度图中，颜色值通常代表距离摄像机的远近：较亮的颜色表示较近的物体，较暗的颜色表示较远的物体。

通过深度图，我们可以分析图片中每个像素与摄像机的距离。当用户移动鼠标时，我们可以根据深度图信息实时计算每个像素的偏移量。距离镜头较近的物体（深度值较大）会产生更大的偏移，而背景（深度值较小）则偏移较小，从而形成自然的视差效果，增强图片的立体感。

着色器（Shader）技术

着色器是图形渲染管线中的小程序，用于控制渲染过程中的顶点和像素处理。在实现图片3D效果时，我们主要使用两种着色器：

顶点着色器：负责计算顶点的位置、法线、纹理坐标等信息，并将其传递给片元着色器。
片元着色器：负责计算每个像素（片元）的最终颜色值，根据纹理、深度信息等进行处理，并输出到屏幕。

通过自定义着色器，我们可以精确控制每个像素的渲染方式，实现复杂的视觉效果，如本文中的3D视差效果。

实现步骤

1. 准备工作

首先，我们需要准备两张图片：

原始图片：要转换为3D效果的图片
深度图：与原始图片尺寸相同的灰度图，亮度代表深度值

2. 核心代码实现

// 加载图片纹理和深度图
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('assets/your-image.webp'); // 原始图片
const depthTexture = textureLoader.load('assets/your-depth.png'); // 深度图

// 创建平面几何体
const geometry = new THREE.PlaneGeometry(19.2, 10.8);

// 鼠标位置跟踪
const mouse = new THREE.Vector2();

// 创建自定义着色器材质
const material = new THREE.ShaderMaterial({
    uniforms: {
        uTexture: { value: texture },        // 原始图片纹理
        uDepthTexture: { value: depthTexture }, // 深度图纹理
        uMouse: { value: mouse }            // 鼠标位置
    },
    vertexShader: `
        varying vec2 vUV;
        void main() {
          vUV = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`,
    fragmentShader: `
        uniform sampler2D uTexture;
        uniform sampler2D uDepthTexture;
        uniform vec2 uMouse;
        varying vec2 vUV;
        
        void main() {
          // 获取原始像素颜色
          vec4 color = texture2D(uTexture, vUV);
          
          // 获取深度值（深度图的红色通道）
          vec4 depth = texture2D(uDepthTexture, vUV);
          float depthValue = depth.r;
          
          // 根据深度值和鼠标位置计算偏移
          float x = vUV.x + uMouse.x * 0.01 * depthValue;
          float y = vUV.y + uMouse.y * 0.01 * depthValue;
          
          // 获取偏移后的像素颜色
          vec4 newColor = texture2D(uTexture, vec2(x, y));
          
          // 输出最终颜色
          gl_FragColor = newColor;
        }`
});

// 创建网格并添加到场景
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// 鼠标移动事件监听
document.addEventListener('mousemove', (event) => {
    // 将鼠标位置标准化到[-1, 1]范围
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

3. 优化与扩展

为了获得更好的效果，可以考虑以下优化措施：

调整偏移系数（0.01）以获得最佳的视差效果
添加平滑过渡，使鼠标移动时效果更加自然
结合其他Three.js特性，如光照效果，增强3D感

应用场景

这种3D图片效果适用于多种场景：

网站首页的横幅图片
产品展示页面
交互式画廊
营销活动页面

通过为静态图片添加动态的3D效果，可以显著提升用户体验，增强网站的视觉吸引力。

总结

本文详细介绍了如何利用Three.js和深度图技术实现图片的3D视差效果。通过理解深度图原理和着色器编程，开发者可以创造出更加生动、立体的网页体验。这种技术不仅能够提升网站的视觉效果，还能增强用户交互性，为现代网页设计提供了一种创新的解决方案。