08-text3D.html


<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - text 3d</title>
    <meta charset="utf-8">
    <script src="../frameworks/three.min.js"></script>
    <script src="../frameworks/dat.gui.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
        <script>

            var gui = new dat.GUI();
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
            camera.position.z = 30;

            var renderer = new THREE.WebGLRenderer(  );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor( 0x000000 );
            document.body.appendChild( renderer.domElement );

            var ambientLight = new THREE.AmbientLight( 0x000000 );
            scene.add( ambientLight );

            var lights = [];
            lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
            lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
            lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );

            lights[ 0 ].position.set( 0, 200, 0 );
            lights[ 1 ].position.set( 100, 200, 100 );
            lights[ 2 ].position.set( - 100, - 200, - 100 );

            scene.add( lights[ 0 ] );
            scene.add( lights[ 1 ] );
            scene.add( lights[ 2 ] );

            
            var mesh = new THREE.Mesh(

                new THREE.Geometry(),

                new THREE.MeshPhongMaterial( {
                    color: 0x156289,
                    emissive: 0x072534,
                    shading: THREE.FlatShading
                } ));

            scene.add( mesh );
            guiGeometry( mesh );



            var render = function () {

                requestAnimationFrame( render );

                var time = Date.now() * 0.001;

    
                mesh.rotation.y += 0.005;



                renderer.render( scene, camera );

            };

            window.addEventListener( 'resize', function () {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }, false );

            render();
            
            
            
            function guiGeometry( mesh ) {

        var data = {
            text : "TextGeometry",
            size : 5,
            height : 2,
            curveSegments : 12,
            font : "helvetiker",
            weight : "regular",
            bevelEnabled : false,
            bevelThickness : 1,
            bevelSize : 0.5
        };

        var fonts = [
            "helvetiker",
            "optimer",
            "gentilis",
            "droid/droid_serif"
        ];

        var weights = [
            "regular", "bold"
        ];

        function generateGeometry() {

            var loader = new THREE.FontLoader();
            loader.load( '../data/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {

                var geometry = new THREE.TextGeometry( data.text, {
                    font: font,
                    size: data.size,
                    height: data.height,
                    curveSegments: data.curveSegments,
                    bevelEnabled: data.bevelEnabled,
                    bevelThickness: data.bevelThickness,
                    bevelSize: data.bevelSize
                } );
                geometry.center();
                mesh.geometry.dispose();
                mesh.geometry=geometry;
        

            } );

        }

        //Hide the wireframe
    
        var folder = gui.addFolder( 'THREE.TextGeometry' );

        folder.add( data, 'text' ).onChange( generateGeometry );
        folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'font', fonts ).onChange( generateGeometry );
        folder.add( data, 'weight', weights ).onChange( generateGeometry );
        folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
        folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
        folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );

        generateGeometry();
            }

        </script>
    </body>
</html>