TextGeometry

*
	//화면 설정
    const scene = new THREE.Scene();

    //카메라 설정
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
    camera.position.z = 5
    scene.add(camera);

    //렌더링 설정
    const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
    renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('canvas').appendChild(renderer.domElement);

    //조명 설정
    const ambientLight = new THREE.AmbientLight(0xffffff, .5)
    scene.add(ambientLight)
    
    const light = new THREE.PointLight(0xffffff, .5)
    light.position.set(1, 1, 1)
    scene.add(light)
    

    //글씨 설정
    let font = null
    const fontPath = 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/fonts/optimer_regular.typeface.json'

    let mat;
    const init = () => {
        console.log('init')
        let geo = new THREE.TextGeometry( 'webs', {
            font: font,
            size: 1,
            height: 0.3,
            curveSegments: 100,
            bevelThickness: 0.1,
            bevelSize: 0.04,
            bevelEnabled: 0.1
        })
    
        geo.verticesNeedUpdate = true
    
    
        const vertex = `
            precision highp float;
            varying vec2 vUv;
            varying vec3 vPos;
            varying vec3 vNormal;
            uniform float uTime;

            void main() {
                vec3 pos = position;
                vUv = uv;
                vPos = pos;

                pos.z += sin((pos.x + uTime * 0.3) * 2.) * 0.3;

                vNormal = normal;
                vNormal *= pos;

                vec4 mvPosition = modelViewMatrix * vec4(pos, 1.);
                gl_Position = projectionMatrix * mvPosition;
            }
        `
        const fragment = `
            precision highp float;
            varying vec2 vUv;
            varying vec3 vPos;
            varying vec3 vNormal;

            void main() {
                vec2 uv = vUv - .5;

                vec3 normal = vNormal;
                vec3 light = vec3(-100., 30., 4.);
                float intensity = .5;
                light = normalize(light) * intensity;
                float dProd = max(0.0, dot(normal, light));
                dProd = smoothstep(1.3, 2., dProd);

                vec3 pos = vPos;
                pos.x += 1.;
                pos *= 0.8;
                vec3 col = pos + dProd;
                col.g += pos.z;

                gl_FragColor = vec4(col, 1.);
            }
        `
    
        mat = new THREE.ShaderMaterial({
            fragmentShader: fragment,
            vertexShader: vertex,
            uniforms: {
                uTime: { value: 0 }
            }
        })
        let mesh = new THREE.Mesh(geo, mat)
        mesh.position.x = -1.5
        mesh.rotation.x = Math.PI * 0.11
        mesh.rotation.y = -Math.PI * 0.13
        scene.add(mesh)
    }

    const loader = new THREE.FontLoader();

    const loadFont = () => {
        loader.load(fontPath, (response) => {
            font = response
            init()
        })
    }
    loadFont()

    //컨트롤 설정
    // const controls = new THREE.OrbitControls(camera, renderer.domElement)
    // controls.enableDamping = true
    // controls.dampingFactor = 0.1

    //애니메이션 설정
    let time = 0
    function animate() {
        time += 0.05
        requestAnimationFrame(animate);

        if(mat) {
            mat.uniforms.uTime.value = time
        }
        //controls.update()

        renderer.render(scene, camera);
    }
    animate();

    //화면 사이즈 설정
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onWindowResize);

TextGeometry

TextGeometry 메서드는 텍스트를 생성하기 위한 클래스다. 이것은 텍스트 문자열과 매개변수 구성된다.

const loader = new FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

	const geometry = new TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelOffset: 0,
		bevelSegments: 5
	} );
} );