当前位置：首页 > JavaScript

js实现景深

2026-03-14 14:22:30JavaScript

实现景深效果的JavaScript方法

在JavaScript中实现景深效果通常涉及对图像的模糊处理，模拟相机聚焦和虚化背景的效果。以下是几种常见的方法：

使用CSS滤镜和JavaScript控制 通过CSS的filter: blur()属性结合JavaScript动态调整模糊程度，可以实现景深效果。创建一个聚焦区域，周围区域逐渐模糊。

.blur-effect {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

document.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  document.querySelector('.focus-area').style.transform = `translate(${x * 10}px, ${y * 10}px)`;
});

使用WebGL和Three.js 对于更复杂的3D景深效果，可以使用Three.js库。通过设置相机的焦点和模糊参数，实现真实的景深渲染。

import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const bokehPass = new BokehPass(scene, camera, {
  focus: 10,
  aperture: 0.1,
  maxblur: 0.01
});

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(bokehPass);

使用Canvas 2D API 通过Canvas的getImageData和putImageData方法，可以手动实现模糊算法，如高斯模糊，来模拟景深。

function applyBlur(ctx, radius) {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;
    data[i + 1] = avg;
    data[i + 2] = avg;
  }

  ctx.putImageData(imageData, 0, 0);
}