如何用PIXI.js实现基于CSS的3D旋转轮播效果？

嘿，我来帮你把那个CSS实现的3D轮播转换成PIXI.js版本！虽然PIXI是个2D渲染引擎，但咱们可以通过模拟3D透视变换来实现几乎一样的效果——核心是用三角函数计算每个轮播项的位置、缩放和透明度，模拟出绕Y轴旋转的视觉效果。

核心思路 #

原CSS方案用rotationY和3D透视实现，PIXI里我们手动计算：

• 给每个轮播项分配初始角度（和原代码一致，360/13 ≈27.69°）
• 根据角度计算元素在虚拟3D空间中的位置（x/z轴坐标）
• 利用透视公式把3D坐标转换成2D屏幕坐标，同时计算缩放比例（远处的元素更小）
• 点击导航按钮时，更新每个元素的角度，平滑过渡到新的位置/缩放

完整实现代码 #

HTML部分

<div>
  <button id="prev">上一项</button>
  <button id="next">下一项</button>
</div>
<canvas id="pixi-stage"></canvas>

JS部分（PIXI.js + GSAP，和原代码工具链一致）

// 初始化PIXI应用
const app = new PIXI.Application({
  width: 800,
  height: 600,
  view: document.getElementById('pixi-stage'),
  backgroundColor: 0x1a1a1a
});

// 配置参数（和原CSS对应）
const boxCount = 13;
const angleStep = 360 / boxCount; // 每个盒子的角度间隔
const rotationRadius = 420; // 对应原代码的transformOrigin z值
const perspective = 1100; // 对应原代码的perspective值

// 创建轮播容器，居中放置
const carouselContainer = new PIXI.Container();
carouselContainer.position.set(app.screen.width / 2, app.screen.height / 2);
app.stage.addChild(carouselContainer);

// 创建所有轮播盒子
const boxes = [];
for (let i = 0; i < boxCount; i++) {
  // 创建一个彩色盒子（模拟原代码的.box元素）
  const box = new PIXI.Graphics();
  const boxSize = 100;
  box.beginFill(Math.random() * 0xffffff);
  box.drawRect(-boxSize/2, -boxSize/2, boxSize, boxSize);
  box.endFill();
  
  // 存储初始角度（和原代码的dataset.rotationY一致）
  box.currentAngle = i * angleStep;
  
  // 初始化位置和缩放
  updateBoxTransform(box);
  
  boxes.push(box);
  carouselContainer.addChild(box);
}

// 更新单个盒子的位置、缩放和透明度
function updateBoxTransform(box) {
  const angleRad = (box.currentAngle * Math.PI) / 180;
  // 计算虚拟3D空间的x和z坐标
  const x = Math.sin(angleRad) * rotationRadius;
  const z = Math.cos(angleRad) * rotationRadius;
  
  // 计算透视缩放：距离相机越远（z越小），元素越小
  const scale = (perspective + z) / perspective;
  box.scale.set(scale);
  
  // 设置x位置（y保持居中）
  box.x = x;
  
  // 根据z值调整透明度，让远处的盒子更暗
  box.alpha = Math.max(0.3, scale);
  
  // 确保近处的盒子在最上层
  box.zIndex = Math.round(scale * 100);
}

// 导航按钮逻辑
document.getElementById('prev').addEventListener('click', () => {
  animateCarousel(-angleStep);
});

document.getElementById('next').addEventListener('click', () => {
  animateCarousel(angleStep);
});

// 平滑动画更新轮播角度
function animateCarousel(angleDelta) {
  boxes.forEach(box => {
    // 用GSAP做平滑过渡，和原代码的staggerTo效果一致
    gsap.to(box, {
      currentAngle: box.currentAngle + angleDelta,
      duration: 1,
      onUpdate: () => {
        updateBoxTransform(box);
      },
      ease: 'linear'
    });
  });
}

关键细节说明 #

• 透视计算：用(perspective + z) / perspective计算缩放比例，模拟相机透视效果，和CSS的perspective原理一致
• zIndex控制：根据缩放比例设置zIndex，确保近处的盒子不会被远处的遮挡
• 透明度优化：远处的盒子透明度降低，增强3D层次感
• GSAP动画：沿用原代码的GSAP来做平滑过渡，保持一致的动画体验

这样实现的效果和原CSS版本几乎一致，而且完全基于PIXI.js渲染，适合需要在Canvas环境下运行的场景！

内容的提问来源于stack exchange，提问作者ukw