So erzielen Sie mit three.js einen dynamischen 3D-Texteffekt

<div Klasse="relativer W-Bildschirm H-Bildschirm">
 <div Klasse="kinetischer-text w-voll h-voll bg-blau-1"></div>
 <div Klasse="Schriftart">
 <Schriftart>
  Eine Reihe von Schriftcodes aus dem Demo-Lebenslauf</font>
 </div>
</div>

:Wurzel {
 --Blaufarbe-1: #2c3e50;
}

.bg-blau-1 {
 Hintergrund: var(--blue-color-1);
}

importiere createGeometry von „https://cdn.skypack.dev/[email protected]“;
importiere MSDFShader von „https://cdn.skypack.dev/[email protected]/shaders/msdf“;
importiere parseBmfontXml von „https://cdn.skypack.dev/[email protected]“;

const font = parseBmfontXml(document.querySelector(".font").innerHTML);
const fontAtlas = "https://i.loli.net/2021/02/20/DcEhuYNjxCgeU42.png";

const kineticTextTorusKnotVertexShader = `(Vertex-Shader-Code, derzeit leer, Einzelheiten siehe unten)`;

const kineticTextTorusKnotFragmentShader = `(Fragment-Shader-Code, derzeit leer, Einzelheiten siehe unten)`;

Klasse KineticText erweitert Base {
 Konstruktor(sel: string, debug: boolean) {
 super(sel, debug);
 this.cameraPosition = neuer DREI.Vektor3(0, 0, 4);
 diese.Uhr = neue DREI.Uhr();
 diese.meshConfig = {
  Torusknoten:
  vertexShader: kinetischerTextTorusKnotVertexShader,
  fragmentShader: kinetischerTextTorusKnotFragmentShader,
  Geometrie: neu THREE.TorusKnotGeometry(9, 3, 768, 3, 4, 3)
  }
 };
 this.meshNames = Objekt.keys(this.meshConfig);
 diese.params = {
  Netzname: "Torusknoten",
  Geschwindigkeit: 0,5,
  Schatten: 5,
  Farbe: "#000000",
  Frequenz: 0,5,
  Text: "ALPHARDEX",
  KameraZ: 2,5
 };
 }
 // Asynchron initialisieren init() {
 dies.createScene();
 dies.createPerspectiveCamera();
 dies.createRenderer(true);
 warte auf this.createKineticText(this.params.text);
 dies.createLight();
 dies.createOrbitControls();
 dies.addListeners();
 dies.setLoop();
 }
 // Dynamischen Text erstellen async createKineticText(text: string) {
 warte auf dies.createFontText(text);
 dies.createRenderTarget();
 dies.createTextContainer();
 }
}

Klasse KineticText erweitert Base {
 loadFontText(text: Zeichenfolge): beliebig {
 returniere neues Promise((auflösen) => {
  const fontGeo = createGeometry({
  Schriftart,
  Text
  });
  const loader = neues THREE.TextureLoader();
  loader.load(fontAtlas, (Textur) => {
  const fontMat = neues THREE.RawShaderMaterial(
   MSDFShader({
   Karte: Textur,
   Seite: DREI.Doppelseite,
   transparent: wahr,
   negieren: falsch,
   Farbe: 0xffffff
   })
  );
  lösen({ fontGeo, fontMat });
  });
 });
 }
 asynchron createFontText(text: string) {
 const { fontGeo, fontMat } = warte auf dies.loadFontText(text);
 const textMesh = this.createMesh({
  Geometrie: fontGeo,
  Material: Schriftmatte
 });
 textMesh.position.set(-0.965, -0.525, 0);
 textMesh.rotation.set(ky.deg2rad(180), 0, 0);
 textMesh.scale.set(0.008, 0.025, 1);
 dies.textMesh = textMesh;
 }
}

variierender Veränderlicher Vektor 2 vUv;
variierender Vektor 3 vPosition;

void main(){
 vec4 Modellposition = Modellmatrix * vec4 (Position, 1.);
 vec4 Ansichtsposition = Ansichtsmatrix * Modellposition;
 vec4 projiziertePosition=Projektionsmatrix*Ansichtsposition;
 gl_Position = projizierte Position;
 
 vUv=uv;
 vPosition=Position;
}

einheitlicher Sampler2D uTexture;
einheitlicher Gleitkommawert uTime;
gleichmäßiger Gleitkommawert uVelocity;
gleichmäßiger Float uShadow;

variierender Veränderlicher Vektor 2 vUv;
variierender Vektor 3 vPosition;

void main(){
 vec2 Wiederholung = vec2(12.,3.);
 vec2 wiederholtUv=vUv*Wiederholung;
 vec2-Verschiebung=vec2(uTime*uVelocity,0.);
 vec2 uv=Bruch(wiederholtes UV+Verschiebung);
 vec3 Textur = Textur2D (uTexture, uv).rgb;
 // Textur*=vec3(uv.x,uv.y,1.);
 float shadow = clamp (vPosition.z / uShadow, 0., 1.); // weiter dunkler (auf 0).
 vec3 Farbe = vec3(Textur*Schatten);
 gl_FragColor = vec4(Farbe,1.);
}

Klasse KineticText erweitert Base {
 erstelleRenderTarget() {
 const rt = neues THREE.WebGLRenderTarget(
  Fenster.innereBreite,
  Fenster.innereHöhe
 );
 dies.rt = rt;
 const rtCamera = neue THREE.PerspectiveCamera(45, 1, 0,1, 1000);
 rtCamera.position.z = this.params.cameraZ;
 diese.rtCamera = rtCamera;
 const rtScene = neue DREI.Szene();
 rtScene.add(dieses.textMesh);
 diese.rtScene = rtScene;
 }
}

Klasse KineticText erweitert Base {
 erstelleTextContainer() {
 wenn (dieses.mesh) {
  diese.Szene.entfernen(dieses.Netz);
  dieses.mesh = null;
  dieses.Material!.entsorgen();
  dieses.material = null;
 }
 this.rtScene.background = neue DREI.Farbe(this.params.color);
 const meshConfig = diese.meshConfig[diese.params.meshName];
 Konstante Geometrie = MeshConfig.Geometrie;
 const material = neues DREI.ShaderMaterial({
  vertexShader: meshConfig.vertexShader,
  fragmentShader: meshConfig.fragmentShader,
  Uniformen:
  uZeit: {
   Wert: 0
  },
  uGeschwindigkeit:
   Wert: this.params.velocity
  },
  uTextur: {
   Wert: this.rt.texture
  },
  uShadow:
   Wert: this.params.shadow
  },
  uFrequenz: {
   Wert: this.params.frequency
  }
  }
 });
 dieses.material = material;
 const mesh = dies.createMesh({
  Geometrie,
  Material
 });
 dies.mesh = Mesh;
 }
 aktualisieren() {
 wenn (diese.rtScene) {
  dies.renderer.setRenderTarget(dieses.rt);
  dieser.Renderer.render(diese.rtSzene, diese.rtKamera);
  this.renderer.setRenderTarget(null);
 }
 const elapsedTime = this.clock.getElapsedTime();
 wenn (dieses.Material) {
  this.material.uniforms.uTime.value = verstrichene Zeit;
 }
 }
}

this.cameraPosition = neuer DREI.Vektor3(0, 0, 40);