使用 Three.js 创建魔法圆效果，使用自定义类和动画实现魔法圆旋转效果。

class ThreeCore {
    dom;
    scene;
    camera;
    defaultCamera;
    renderer;
    clock;
    options;
    stats;
    animates;
    
    constructor(dom, options) {
        this.dom = dom;
        this.options = options;
        this.scene = new THREE.Scene();
        this.clock = new THREE.Clock();
        this.animates = {};
        
        const k = dom.clientWidth / dom.clientHeight;
        if ("fov" in options.cameraOptions) {
            this.defaultCamera = new THREE.PerspectiveCamera(options.cameraOptions.fov, k, options.cameraOptions.near, options.cameraOptions.far);
        } else {
            const s = options.cameraOptions.s;
            this.defaultCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, options.cameraOptions.near, options.cameraOptions.far);
        }
        
        this.camera = this.defaultCamera;
        this.scene.add(this.camera);
        
        const rendererOptions = {
            antialias: true,
            alpha: true,
            logarithmicDepthBuffer: true
        };
        
        const renderer = new THREE.WebGLRenderer(Object.assign({}, rendererOptions, options.rendererOptions));
        renderer.setSize(dom.clientWidth, dom.clientHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        dom.appendChild(renderer.domElement);
        
        this.renderer = renderer;
        this.stats = new Stats();
        dom.appendChild(this.stats.dom);
        
        window.addEventListener("resize", this.onResize, false);
        
        setTimeout(() => {
            this.init();
            this.animate();
        }, 0);
    }
    
    animate() {
        this.renderer.setAnimationLoop(() => {
            this.onRenderer();
            this.stats.update();
            
            for (const key in this.animates) {
                this.animates[key](this.clock.getDelta());
            }
            
            this.renderer.render(this.scene, this.camera);
        });
    }
    
    addAnimate(name, func) {
        this.animates[name] = func;
    }
    
    removeAnimate(name) {
        delete this.animates[name];
    }
}

class MagicCircle extends ThreeCore {
    circles = [];
    
    init() {
        const circleCount = 5;
        
        for (let i = 0; i < circleCount; i++) {
            const radius = 2 + i * 0.5;
            const segments = 64;
            const geometry = new THREE.RingGeometry(radius - 0.05, radius, segments);
            
            const hue = i / circleCount;
            const color = new THREE.Color().setHSL(hue, 0.8, 0.5);
            
            const material = new THREE.MeshBasicMaterial({
                color: color,
                side: THREE.DoubleSide,
                transparent: true,
                opacity: 0.8
            });
            
            const circle = new THREE.Mesh(geometry, material);
            circle.rotation.x = Math.PI / 2;
            circle.userData = {
                rotationSpeed: (i % 2 === 0 ? 1 : -1) * (0.5 + i * 0.1)
            };
            
            this.scene.add(circle);
            this.circles.push(circle);
        }
        
        this.addAnimate('rotateCircles', (delta) => {
            this.circles.forEach(circle => {
                circle.rotation.z += circle.userData.rotationSpeed * delta;
            });
        });
    }
}