最佳ThreeJS实践 · 实现赛博朋克风格的三维图像气泡效果

npm init -y

npm install three

npm i vite -D

// 创建赛博朋克风格的背景渐变
const gradientTexture = new THREE.CanvasTexture(createGradientCanvas()); // 创建渐变纹理
scene.background = gradientTexture; // 将背景设置为渐变纹理

// 创建渐变背景
function createGradientCanvas() {
  const canvas = document.createElement('canvas'); // 创建一个 canvas 元素
  canvas.width = 512; // 设置 canvas 的宽度
  canvas.height = 512; // 设置 canvas 的高度
  const context = canvas.getContext('2d'); // 获取 2D 上下文
  const gradient = context.createLinearGradient(0, 0, 512, 512); // 创建线性渐变
  gradient.addColorStop(0, '#2c003e'); // 渐变开始颜色（深紫色）
  gradient.addColorStop(1, '#ff007d'); // 渐变结束颜色（亮粉色）
  // gradient.addColorStop(0, '#FFFFFF'); // 渐变开始颜色（深紫色）
  // gradient.addColorStop(1, '#EEE000'); // 渐变结束颜色（亮粉色）
  context.fillStyle = gradient; // 设置填充样式为渐变
  context.fillRect(0, 0, 512, 512); // 填充整个 canvas
  return canvas; // 返回创建的 canvas
}

// 添加环境光
// const ambientLight = new THREE.AmbientLight(0x444444); // 创建环境光，颜色较暗
const ambientLight = new THREE.AmbientLight(0xffffff); // 创建环境光，颜色较暗
scene.add(ambientLight); // 将环境光添加到场景中

// 添加方向光
// const directionalLight = new THREE.DirectionalLight(0x00ffff, 1); // 创建方向光，颜色为青色
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 创建方向光，颜色为青色
directionalLight.position.set(10, 10, 10).normalize(); // 设置光源的位置并归一化
scene.add(directionalLight); // 将方向光添加到场景中

  const geometry = new THREE.CircleGeometry(circleRadius, 32); // 创建圆形几何体
  const texture = textureLoader.load(url); // 加载纹理

  // 设置纹理的过滤方式
  texture.minFilter = THREE.LinearMipMapLinearFilter;
  texture.magFilter = THREE.LinearFilter;

  // 设置各向异性过滤
  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

  // 设置纹理的颜色编码方式
  texture.encoding = THREE.sRGBEncoding;

  const material = new THREE.MeshStandardMaterial({
    map: texture,
    emissive: new THREE.Color(0x000000), // 默认不发光
    emissiveIntensity: 0, // 默认发光强度为0
    side: THREE.DoubleSide, // 双面渲染
    roughness: 0.2, // 低粗糙度
    metalness: 0.5, // 适度金属光泽
  });

// 创建 OrbitControls 实例，用于相机的平滑控制
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用平滑阻尼效果
controls.dampingFactor = 0.25; // 设置阻尼因子
controls.enableZoom = true; // 启用缩放
controls.enableRotate = true; // 启用旋转


// 自适应窗口大小
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height); // 调整渲染器大小
  camera.aspect = width / height; // 调整相机的宽高比
  camera.updateProjectionMatrix(); // 更新相机投影矩阵
});

// 调整图片大小和气泡感效果
function adjustImageSizes() {
  let closestCircle = null; // 存储距离相机最近的图片
  let minDistance = Infinity; // 初始设置为无穷大

  // 找到距离相机最近且在视锥体内的图片
  circles.forEach((circle) => {
    const distance = camera.position.distanceTo(circle.position); // 计算相机到图片的距离

    // 检查图片是否在相机视锥体内
    const circleBoundingBox = new THREE.Box3().setFromObject(circle); // 获取图片的包围盒
    if (frustum.intersectsBox(circleBoundingBox)) { // 检查包围盒是否与视锥体相交
      if (distance < minDistance) { // 如果距离更近，更新最近的图片
        minDistance = distance;
        closestCircle = circle;
      }
    }
  });

  // 为每个图片设置缩放效果
  circles.forEach((circle) => {
    if (circle === closestCircle) {
      // 最近的图片放大到 1.8 倍，使用缓动效果
      circle.scale.lerp(new THREE.Vector3(1.8, 1.8, 1.8), 0.1);
      // circle.material.emissive = new THREE.Color('#ff007d'); // 设置发光颜色
      circle.material.emissiveIntensity = 0.5; // 设置发光强度
    } else {
      // 其他图片缩小到 0.5 倍，模拟气泡挤压感
      circle.scale.lerp(new THREE.Vector3(0.5, 0.5, 0.5), 0.1);
      circle.material.emissive = new THREE.Color('#000000'); // 无发光效果
      circle.material.emissiveIntensity = 0; // 发光强度为0
    }
  });
}