"use client"; import React, { useEffect, useMemo, useRef, useState } from "react"; import { OrbitControls, useCursor } from "@react-three/drei"; import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { AsciiEffect } from "three-stdlib"; export const AsciiRenderer = () => { return (

); }; const Torusknot = (props: any) => { const ref = useRef(null); const [clicked, click] = useState(false); const [hovered, hover] = useState(false); useCursor(hovered); useFrame( (state, delta) => (ref.current.rotation.x = ref.current.rotation.y += delta / 2), ); return ( click(!clicked)} onPointerOver={() => hover(true)} onPointerOut={() => hover(false)} > ); }; const Renderer = ({ renderIndex = 1, characters = " .:-+*=%@#", ...options }: any) => { // Reactive state const { size, gl, scene, camera } = useThree(); // Create effect const effect = useMemo(() => { const effect = new AsciiEffect(gl, characters, options); effect.domElement.style.position = "absolute"; effect.domElement.style.top = "0px"; effect.domElement.style.left = "0px"; effect.domElement.style.color = "white"; effect.domElement.style.backgroundColor = "black"; effect.domElement.style.pointerEvents = "none"; return effect; }, [characters, options.invert]); // Append on mount, remove on unmount useEffect(() => { gl.domElement.parentNode?.appendChild(effect.domElement); return () => { gl.domElement.parentNode?.removeChild(effect.domElement); }; }, [effect]); // Set size useEffect(() => { effect.setSize(size.width, size.height); }, [effect, size]); // Take over render-loop (that is what the index is for) useFrame((state) => { effect.render(scene, camera); }, renderIndex); return null; };

ASCII Renderer

Category

Author

Packages

As seen on