Viewing text using three.js

0

I'm new to programming with three.js, and I'm basing myself and trying out several examples that are available on threejs.org, however when I download the required documentation and run it in my browser, I get nothing.

This is the code I'm using and you can find this link link

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - Simple text from json</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="info">
            <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - Simple text from json fonts.
        </div>

        <script src="../build/three.js"></script>
        <script src="js/controls/OrbitControls.js"></script>

        <script>

            var camera, scene, renderer;

            init();
            animate();

            function init( ) {

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.set( 0, - 400, 600 );

                var controls = new THREE.OrbitControls( camera );
                controls.target.set( 0, 0, 0 );
                controls.update();

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xf0f0f0 );

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

                    var xMid, text;

                    var color = 0x006699;

                    var matDark = new THREE.LineBasicMaterial( {
                        color: color,
                        side: THREE.DoubleSide
                    } );

                    var matLite = new THREE.MeshBasicMaterial( {
                        color: color,
                        transparent: true,
                        opacity: 0.4,
                        side: THREE.DoubleSide
                    } );

                    var message = "   Three.js\nSimple text.";

                    var shapes = font.generateShapes( message, 100 );

                    var geometry = new THREE.ShapeBufferGeometry( shapes );

                    geometry.computeBoundingBox();

                    xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );

                    geometry.translate( xMid, 0, 0 );

                    // make shape ( N.B. edge view not visible )

                    text = new THREE.Mesh( geometry, matLite );
                    text.position.z = - 150;
                    scene.add( text );

                    // make line shape ( N.B. edge view remains visible )

                    var holeShapes = [];

                    for ( var i = 0; i < shapes.length; i ++ ) {

                        var shape = shapes[ i ];

                        if ( shape.holes && shape.holes.length > 0 ) {

                            for ( var j = 0; j < shape.holes.length; j ++ ) {

                                var hole = shape.holes[ j ];
                                holeShapes.push( hole );

                            }

                        }

                    }

                    shapes.push.apply( shapes, holeShapes );

                    var lineText = new THREE.Object3D();

                    for ( var i = 0; i < shapes.length; i ++ ) {

                        var shape = shapes[ i ];

                        var points = shape.getPoints();
                        var geometry = new THREE.BufferGeometry().setFromPoints( points );

                        geometry.translate( xMid, 0, 0 );

                        var lineMesh = new THREE.Line( geometry, matDark );
                        lineText.add( lineMesh );

                    }

                    scene.add( lineText );

                } ); //end load function

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

            } // end init

            function onWindowResize() {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

        </script>

    </body>
</html>

Can you help me? Or indicate something you need to install beforehand. The editor I'm using is visual studio code.

    
asked by anonymous 03.01.2019 / 00:39

0 answers