3dtext.js

//Create3DText(CanvasElement, RenderResolution, Text)


import * as THREE from 'three';

import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'




function Create3DText(canvas, size, text) {
    var SonaCanvas = document.getElementById(canvas);

    const scene = new THREE.Scene( );
    const camera = new THREE.PerspectiveCamera( 20, 320 / 100, 0.1, 2000 );



    const renderer = new THREE.WebGLRenderer({
            canvas: SonaCanvas,
            antialias: false,
            alpha: true
        
        });
    renderer.setSize( 320, 100 );

    const scaleFactor = size;

    renderer.setPixelRatio( window.devicePixelRatio * scaleFactor);



    const controls = new OrbitControls( camera, renderer.domElement );



    const loader = new FontLoader()
    loader.load('../font/csans.json', function ( font ) {
        const textGeometry = new TextGeometry(text, {
            font: font,
            size: 80,
            height: 5,
            curveSegments: 12,
            bevelEnabled: false,
            bevelThickness: 10,
            bevelSize: 8,
            bevelOffset: 0,
            bevelSegments: 5
        
        });
        textGeometry.center()
        
        const textMaterial = new THREE.MeshPhongMaterial();
        const introText = new THREE.Mesh(textGeometry, textMaterial);
        introText.position.set(0, 0, -700);
        scene.add(introText);
        



        function animate() {

            setTimeout( function() {
                requestAnimationFrame( animate );
                introText.rotation.y += 0.5 //rotate
            }, 1000 / 10 ); //limit to 10 fps
            renderer.render( scene, camera );
            
        }
        animate();
        
    });


    const pointLight = new THREE.PointLight(0xffffff, 1.5); 
    pointLight.position.set(0, 100, 60); 
    scene.add(pointLight);

}