跳到主要内容

Interactive 3D Code Showcase

Here is a demo of the 3D Flip Card idea!

It seamlessly blends the interactive 3D ASCII Earth with the underlying source code. This is perfect for a developer's landing page or documentation because it allows visitors to immediately see the "magic" behind the component without cluttering the screen.

Try it out!​

👉 Hover over (or tap) the card below to flip it and reveal the code. (You can also still click and drag the Earth to rotate it when it is on the front side)

Hover to View Code </>

Behind the Scenes

Powered by Three.js and AsciiEffect, combined with OrbitControls to allow interactive tumbling and auto-rotation.

earth.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { AsciiEffect } from 'three/examples/jsm/effects/AsciiEffect';

// Initialize Camera & Scene
const camera = new THREE.PerspectiveCamera(70, w / h, 1, 1000);
camera.position.set(0, 150, 420);

// Add AsciiEffect Renderer
const effect = new AsciiEffect(renderer, ' .:-+*=@#%8901', { invert: true });
effect.domElement.style.color = '#25c2a0';

// Attach OrbitControls for Drag to Rotate
const controls = new OrbitControls(camera, effect.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.autoRotate = true; // Rotates automatically!
controls.autoRotateSpeed = 1.5;

How it works​

This component was built directly into Docusaurus using React (MDX):

  1. Front Side: Renders the AsciiEarth Three.js component.
  2. Back Side: Renders a Docusaurus @theme/CodeBlock containing the syntax-highlighted setup code.
  3. CSS: Uses 3D transforms (rotateY(180deg)) and backface-visibility: hidden to create a smooth, hardware-accelerated flip animation.