首页图片转3D效果

threejs网址

核心原理

深度图

用于记录场景中每个像素的深度信息。

通过深度图可以看出图片中距离每个像素距离摄像机的距离，距离越近越靠近镜头，距离越远就是图片中所谓的背景。

可以通过深度图对图片中的每个像素根据鼠标移动实时计算偏移量，深度较浅的（即靠近镜头的物体）偏移量增加，与背景偏移形成一定的层次感，这样就能实现图片3D效果。

着色器

着色器（Shader）是一种在图形渲染管线中运行的程序，它可以对渲染过程中的顶点、像素等进行各种计算和处理，从而实现各种复杂的渲染效果。

着色器通常分为两种类型：顶点着色器和片元着色器。顶点着色器是用来计算顶点的位置、法线、纹理坐标等信息，并将其传递给片元着色器进行处理；片元着色器则是用来计算每个像素（片元）的颜色值，通常根据纹理、灯光、材质等信息进行计算，并输出最终颜色值到屏幕上。

核心代码

// 加载图片纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('assets/xx.webp');
const deptTexture = textureLoader.load('assets/xx_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: deptTexture },
        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);