How to use

import { AsciiSimulation } from "@/components/v1/skiper14";

const BasicDemo = () => {
  return (
    <div className="h-screen w-full">
      <AsciiSimulation modelPath="/models/car.glb" className="h-full w-full" />
    </div>
  );
};

Customized ASCII Effect

import { AsciiSimulation } from "@/components/v1/skiper14";

const CustomDemo = () => {
  return (
    <div className="h-screen w-full bg-black">
      <AsciiSimulation
        modelPath="/models/car.glb"
        asciiChars=" .:-+*=%@#"
        invert={false}
        fontSize="3px"
        lineHeight="3px"
        backgroundColor="black"
        textColor="lime"
        fontFamily="Courier New"
        rotationSpeed={0.002}
        enableZoom={true}
        enablePan={true}
        className="h-full w-full"
      />
    </div>
  );
};

Important notes

• Requires a 3D model in GLB format for best results
• to download 3d models, you can use sketchfab and place them in the "public/models/" directory
• The ASCII effect works best with models that have good contrast and detail
• Performance may vary based on model complexity and screen resolution
• The component automatically handles cleanup and memory management

Attribution

Inspired by and adapted from Three.js ASCII Effect