跳到主要内容

Interactive 3D Code Showcase

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

It pairs a self-rotating ASCII Earth with the underlying source code. The globe uses Three.js AsciiEffect; selection-safe styling keeps drag interaction from selecting the generated characters.

Try it out!​

👉 Drag the Earth to rotate it, or use the explicit “View code” control to flip the card.

它是怎么做的

Three.js 画出球体，AsciiEffect 把画面换成终端字符，再用一点 CSS 让拖动更干净。

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

const effect = new AsciiEffect(renderer, ' .:-+*=%~@#01o', {
  invert: true,
});
const controls = new OrbitControls(camera, effect.domElement);
controls.enableZoom = false;
controls.enablePan = false;
controls.enableDamping = true;

// Keep the Earth moving without coupling drawing to control events.
sphere.rotation.y += delta * 0.18;
controls.update();
effect.render(scene, camera);

How it works​

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

  1. Front Side: Renders the compact 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.