three.js第四篇【创建3D文字】

时间:2022-02-27 20:17:46


网页里面显示文字,太简单了。但是如果要显示3D效果文字,懵逼了吧。

看three.js强大威力!!


<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="../build/three.js" type="text/javascript"></script>
        
    </head>
    <body>
    
     <script  type="text/javascript" >


var scene,camera,render;
        var loader = new THREE.FontLoader();
        //导入字体,设定字体,这里的话,你们找对自己的字体路径,可能和我的不一样的!!下载的three.js包里面examples/fonts里面有字体
        loader.load('../examples/fonts/helvetiker_bold.typeface.json',function(font){
            init(font);
            animate();
        });


        function init(font){
            // 老三样 场景scene,相机camera,渲染器render
             scene=new THREE.Scene();
            // 相机
            camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000);
            camera.position.set(0,10,500);
          
            // 渲染器
            renderer=new THREE.WebGLRenderer();


            //背景颜色修改一下
            renderer.setClearColor( 0xf0f0f0 );


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


            //显示在窗体
            document.body.appendChild(renderer.domElement);       


            // 文字
            var text = "text3D";


            var g = new THREE.TextGeometry(text,{
                // 设定文字字体,
                font:font,
                //尺寸
                size:30,
                //厚度
                height:30,
            });
            //计算边界,暂时不用管
            g.computeBoundingBox();
            //3D文字材质
            var m = new THREE.MeshBasicMaterial({color:0xff0000});
            var mesh = new THREE.Mesh(g,m);
          
            // 加入到场景中
            scene.add(mesh);               
                
        }


        function animate(){
            requestAnimationFrame( animate );
             // 渲染
            renderer.render(scene,camera);   
        }
    </script>
    </body>
</html>