智能摘要

引言：让文章详情页成为视觉焦点

在子比Zibll主题中，文章详情页是用户停留时间最长的区域。通过添加动态粒子光波与3D旋转地球交互特效，能够极大地提升页面的科技感和沉浸感。本教程将手把手教你如何在文章详情页实现这一效果，兼容最新版子比主题和主流浏览器。

一张展示文章详情页全屏效果的截图，主体是动态粒子光波围绕3D旋转地球，背景深蓝色调，粒子呈淡蓝色光点，地球表面有发光网格线，构图居中，风格科技感十足

准备工作：确保你的环境符合要求

在开始之前，请确认以下条件：

子比Zibll主题版本：建议v7.9及以上，本教程代码兼容最新版。
WordPress版本：建议6.0以上。
浏览器支持：Chrome、Firefox、Edge等现代浏览器，需支持WebGL和CSS3 3D变换。
工具需求：文本编辑器（如VS Code）和FTP/文件管理器，用于修改主题文件。

第一步：创建特效的HTML结构

首先，我们需要在文章详情页添加一个容器来承载特效。打开子比主题的single.php文件（位于/wp-content/themes/zibll/），找到文章内容区域，通常在<div class="article-content">之前，添加以下代码：

<div id="particle-earth-container"></div>

这个容器将作为特效的挂载点。注意不要放在已有容器内部，避免样式冲突。

第二步：添加CSS样式

接下来，在主题的自定义CSS区域（WordPress后台 -> 外观 -> 自定义 -> 额外CSS）或者子比主题的style.css文件中，添加以下样式：

#particle-earth-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* 确保文章内容在特效上层 */
.article-content {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 10px;
}

/* 响应式调整：在移动端隐藏特效以提升性能 */
@media (max-width: 768px) {
  #particle-earth-container {
    display: none;
  }
}

这段代码将容器设置为全屏固定定位，并位于内容层下方。通过pointer-events: none确保用户仍能与文章内容交互。

第三步：引入Three.js库和特效脚本

本特效基于Three.js实现，需要从CDN加载库。在子比主题的footer.php文件（位于/wp-content/themes/zibll/）中，在</body>之前添加以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 特效主脚本
(function() {
  // 检测是否在文章详情页
  if (!document.querySelector('#particle-earth-container')) return;

  const container = document.getElementById('particle-earth-container');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x000000, 0); // 透明背景
  container.appendChild(renderer.domElement);

  // 创建地球
  const earthGeometry = new THREE.SphereGeometry(2, 32, 32);
  const earthMaterial = new THREE.MeshPhongMaterial({
    color: 0x2244aa,
    emissive: 0x112244,
    wireframe: true
  });
  const earth = new THREE.Mesh(earthGeometry, earthMaterial);
  scene.add(earth);

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0x404060);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(5, 3, 5);
  scene.add(directionalLight);

  // 创建粒子系统（光波效果）
  const particlesCount = 2000;
  const positions = new Float32Array(particlesCount * 3);
  for (let i = 0; i  {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
})();
</script>

这段脚本创建了一个3D场景，包含一个线框地球和围绕它的粒子光波。粒子随机分布在球体表面，动态旋转，营造出科幻的光波效果。

第四步：添加鼠标交互（进阶功能）

为了让特效更具互动性，我们可以添加鼠标拖拽旋转功能。在第三步的脚本中，加入以下代码：

// 鼠标交互
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

renderer.domElement.addEventListener('mousedown', (e) => {
  isDragging = true;
  previousMousePosition = { x: e.clientX, y: e.clientY };
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const deltaX = e.clientX - previousMousePosition.x;
  const deltaY = e.clientY - previousMousePosition.y;
  earth.rotation.y += deltaX * 0.01;
  particles.rotation.y += deltaX * 0.005;
  previousMousePosition = { x: e.clientX, y: e.clientY };
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 触摸支持
renderer.domElement.addEventListener('touchstart', (e) => {
  isDragging = true;
  previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const deltaX = e.touches[0].clientX - previousMousePosition.x;
  const deltaY = e.touches[0].clientY - previousMousePosition.y;
  earth.rotation.y += deltaX * 0.01;
  particles.rotation.y += deltaX * 0.005;
  previousMousePosition = { x: e.touches[0].clientX, y: e.touches[0].clientY };
});

document.addEventListener('touchend', () => {
  isDragging = false;
});

将这段代码放在animate函数之前。这样，用户可以通过鼠标拖拽或触摸滑动来控制地球和粒子的旋转，增强交互体验。

第五步：性能优化与兼容性

为了确保特效不影响页面加载速度和用户体验，按以下步骤优化：

懒加载：只在文章详情页加载脚本。可以通过判断single.php中的条件标签实现，例如：if (is_single()) { // 加载脚本 }。
降低粒子数量：如果页面卡顿，将particlesCount从2000调整为1000或500。
使用requestAnimationFrame：脚本已使用，确保动画流畅且不占用CPU。
移动端隐藏：CSS中已添加媒体查询，在屏幕宽度小于768px时隐藏特效。