智能摘要

前言：从静态到沉浸式体验的升级

在子比Zibll主题中，文章详情页通常是访客停留时间最长的区域。传统的静态背景和普通交互已无法满足用户对视觉冲击力的期待。本次教程将带你实现一个融合动态粒子流光系统与3D旋转星盘的高级特效，让文章详情页在访客眼前活起来。

这套特效由两个核心模块构成：

动态粒子流光系统：粒子沿曲线路径流动，形成拖尾光效，营造科技感氛围
3D旋转星盘：一个由多层圆环和光点构成的立体星盘，随鼠标视角旋转交互

特效兼容最新版子比主题（v7.0+），适用于WordPress 6.x环境，经Chrome/Firefox/Safari实测无兼容性问题。

文章详情页上方展示最终特效的截图：深色背景上，彩色粒子如流星般流动，中心是一个由金色和蓝色光点构成的<a href= — 文章详情页上方展示最终特效的截图：深色背景上，彩色粒子如流星般流动，中心是一个由金色和蓝色光点构成的3D星盘，缓缓旋转。风格：赛博朋克+科技蓝调，构图：居中对称，星盘占画面60%，粒子环绕四周。

第一步：准备工作

在开始编写代码前，请确保你已具备以下条件：

可正常访问的子比Zibll主题站点（推荐最新版）
WordPress后台具备编辑主题文件或使用自定义代码插件的权限
建议使用子主题（Child Theme）进行修改，避免更新覆盖

推荐使用Code Snippets插件管理自定义代码，或直接在主题的functions.php中添加钩子。

第二步：注入CSS与JavaScript资源

我们需要在文章详情页头部加载特效所需的样式和脚本。打开子主题的functions.php文件，添加以下代码：

// 在文章详情页注入特效资源
add_action('wp_enqueue_scripts', function() {
    if (is_single()) {
        // Three.js核心库
        wp_enqueue_script('three-js', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js', array(), 'r128', true);
        // 自定义特效脚本
        wp_enqueue_script('zibll-particle-star', get_stylesheet_directory_uri() . '/assets/js/particle-star.js', array('three-js'), '1.0.0', true);
        // 自定义样式
        wp_enqueue_style('zibll-particle-star-css', get_stylesheet_directory_uri() . '/assets/css/particle-star.css', array(), '1.0.0');
    }
});

如果使用子主题，请在主题目录下创建assets/js/和assets/css/文件夹，用于存放后续文件。

第三步：构建粒子流光系统

粒子流光采用Canvas 2D实现，性能优于WebGL，适合作为背景层。在 assets/js/particle-star.js 中编写核心代码：

// 粒子流光系统
(function() {
    var canvas = document.createElement('canvas');
    canvas.id = 'particle-canvas';
    canvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;';
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    var particles = [];
    var MAX_PARTICLES = 80;
    var colors = ['#00d4ff', '#7b2ff7', '#ff6b6b', '#ffd93d'];

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    // 粒子类
    function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 3 + 1;
        this.speedX = (Math.random() - 0.5) * 2;
        this.speedY = (Math.random() - 0.5) * 2;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.opacity = Math.random() * 0.7 + 0.3;
        this.trail = []; // 拖尾轨迹
    }

    Particle.prototype.update = function() {
        // 曲线运动（添加正弦波动）
        this.speedX += Math.sin(this.y * 0.01) * 0.05;
        this.speedY += Math.cos(this.x * 0.01) * 0.05;
        this.x += this.speedX;
        this.y += this.speedY;

        // 边界回弹
        if (this.x  canvas.width) this.speedX *= -1;
        if (this.y  canvas.height) this.speedY *= -1;

        // 记录轨迹
        this.trail.push({x: this.x, y: this.y});
        if (this.trail.length > 20) this.trail.shift();
    };

    Particle.prototype.draw = function() {
        // 绘制拖尾
        for (var i = 0; i < this.trail.length - 1; i++) {
            var alpha = i / this.trail.length * this.opacity;
            ctx.beginPath();
            ctx.strokeStyle = this.color.replace(')', ',' + alpha + ')');
            ctx.lineWidth = this.size * 0.5;
            ctx.moveTo(this.trail[i].x, this.trail[i].y);
            ctx.lineTo(this.trail[i+1].x, this.trail[i+1].y);
            ctx.stroke();
        }

        // 绘制粒子本身
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.globalAlpha = this.opacity;
        ctx.fill();
        ctx.globalAlpha = 1;
    };

    // 初始化粒子
    for (var i = 0; i < MAX_PARTICLES; i++) {
        particles.push(new Particle());
    }

    // 动画循环
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(function(p) {
            p.update();
            p.draw();
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

这段代码创建了80个带有彩色拖尾的粒子，它们在画布上做曲线运动，形成流光效果。颜色取自蓝紫红黄四色，通过正弦波函数模拟自然流动感。

第四步：构建3D旋转星盘

3D星盘使用Three.js实现，包含两个主要圆环和若干光点。继续在 particle-star.js 中添加代码：

// 3D星盘模块
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 15;

var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.domElement.id = 'star-disk';
renderer.domElement.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;';
document.body.appendChild(renderer.domElement);

// 创建内层圆环（小）
var innerRingGeo = new THREE.TorusGeometry(2, 0.05, 16, 100);
var innerRingMat = new THREE.MeshBasicMaterial({ color: 0x00d4ff });
var innerRing = new THREE.Mesh(innerRingGeo, innerRingMat);
innerRing.rotation.x = Math.PI / 2;
scene.add(innerRing);

// 创建外层圆环（大）
var outerRingGeo = new THREE.TorusGeometry(4, 0.08, 24, 100);
var outerRingMat = new THREE.MeshBasicMaterial({ color: 0x7b2ff7 });
var outerRing = new THREE.Mesh(outerRingGeo, outerRingMat);
outerRing.rotation.x = Math.PI / 2;
outerRing.rotation.z = 0.3;
scene.add(outerRing);

// 随机光点（沿圆环分布）
var dotGroup = new THREE.Group();
var dotCount = 30;
for (var i = 0; i  0.5 ? 0xffd93d : 0xff6b6b });
    var dot = new THREE.Mesh(dotGeo, dotMat);
    dot.position.x = Math.cos(angle) * radius;
    dot.position.z = Math.sin(angle) * radius;
    dot.position.y = Math.sin(angle * 3) * 0.5; // 上下浮动
    dotGroup.add(dot);
}
scene.add(dotGroup);

// 鼠标交互：跟随鼠标旋转
var mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', function(e) {
    mouseX = (e.clientX / window.innerWidth) * 2 - 1;
    mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
});

// 动画循环
function animateThree() {
    requestAnimationFrame(animateThree);

    // 自转
    innerRing.rotation.z += 0.005;
    outerRing.rotation.z -= 0.003;
    dotGroup.rotation.y += 0.01;
    dotGroup.rotation.x += 0.005;

    // 鼠标平滑跟随
    innerRing.rotation.x += (Math.PI / 2 + mouseY * 0.3 - innerRing.rotation.x) * 0.05;
    innerRing.rotation.y += (mouseX * 0.3 - innerRing.rotation.y) * 0.05;
    outerRing.rotation.x += (Math.PI / 2 + mouseY * 0.3 - outerRing.rotation.x) * 0.05;
    outerRing.rotation.y += (mouseX * 0.3 - outerRing.rotation.y) * 0.05;
    dotGroup.rotation.x += (mouseY * 0.2 - dotGroup.rotation.x) * 0.05;

    renderer.render(scene, camera);
}
animateThree();

星盘由内外两个半透明圆环和30个彩色光点组成。光点沿圆环分布并带有上下浮动效果，鼠标移动时星盘会平滑旋转，产生沉浸式交互感。

第五步：CSS样式美化

在 assets/css/particle-star.css 中添加样式，确保特效层叠正确：

/* 粒子Canvas位于底层 */
#particle-canvas {
    z-index: -1 !important;
}

/* 3D星盘位于中层 */
#star-disk {
    z-index: 0 !important;
}

/* 文章详情页内容位于顶层 */
.single .main-content {
    position: relative;
    z-index: 1;
    background: rgba(18, 22, 34, 0.85);
    border-radius: 12px;
    padding: 30px;
    margin: 20px auto;
    max-width: 800px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 适配深色模式 */
@media (prefers-color-scheme: dark) {
    .single .main-content {
        background: rgba(10, 14, 23, 0.9);
    }
}

这里的关键点是将Canvas和Three.js渲染器设为fixed定位，覆盖全屏。文章内容区域使用半透明毛玻璃效果，既能透出背景特效，又保证文字可读性。backdrop-filter: blur(10px) 提供了磨砂玻璃质感。

第六步：性能优化与兼容性处理

特效虽好，但不能影响页面加载速度和操作体验。请做以下优化：

限制帧率：在动画循环中添加帧率控制，当页面不可见时暂停渲染
移动端适配：在移动设备上降低粒子数量和星盘精度，使用 window.innerWidth < 768 的条件判断
资源预加载：Three.js库使用CDN，建议在header中提前加载
内存管理：在页面卸载时移除事件监听和动画循环，避免内存泄漏

示例优化代码（添加到particle-star.js末尾）：

// 页面可见性暂停
var isVisible = true;
document.addEventListener('visibilitychange', function() {
    isVisible = !document.hidden;
});

// 在animate和animateThree函数中增加判断
function animate() {
    if (!isVisible) { requestAnimationFrame(animate); return; }
    // ... 原有代码
}

// 移动端简化
if (window.innerWidth < 768) {
    MAX_PARTICLES = 30;
    dotCount = 15;
}