Aller au contenu principal

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.

Comment ça marche

Three.js dessine la sphère, AsciiEffect la transforme en caractères de terminal et un peu de CSS rend le glisser plus fluide.

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.