ThreeJS学习笔记（4）-3D文字

来源：互联网发布：电脑特效软件编辑：程序博客网时间：2024/05/17 21:07

<!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>

经过优化后的代码，如下：

<!DOCTYPE html><html><head><title></title><style type="text/css">body{margin:0;}div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}</style><script src="js/three.js"></script><script src="js/jquery.js"></script><script>//定义场景并初始化var scene;function initScene(){scene = new THREE.Scene();}//定义相机并初始化var camera;function initCamera(){camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);camera.position.set(0,100,500);camera.lookAt(new THREE.Vector3(0,0,0));}//定义渲染器并初始化var renderer;function initRenderer(){renderer= new THREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);$("#canvas-frame").append(renderer.domElement);renderer.setClearColor(0x39609b,1);}//定义灯光并初始化var light;function initLight(){light=new THREE.DirectionalLight(0xFF0000,1.0,0);light.position.set(100,100,200);scene.add(light);}//添加渐变线function initObject(){var geometry = new THREE.Geometry();var material = new THREE.MeshBasicMaterial({ vertexColors: true });var color1=new THREE.Color(0x444444);var color2=new THREE.Color(0xFF0000);var p1=new THREE.Vector3(-100,0,100);var p2=new THREE.Vector3(100,0,-100);geometry.vertices.push(p1);geometry.vertices.push(p2);geometry.colors.push(color1,color2);var line=new THREE.Line(geometry,material);scene.add(line);}//添加3D文字function init3DText(fontloader){var fontloader;fontloader = new THREE.FontLoader();fontloader.load('fonts/helvetiker_bold.typeface.json',function(font){var text="FOX";var g=new THREE.TextGeometry(text,{font:font,size:50,height:30,});g.computeBoundingBox();//3D文字材质var m = new THREE.MeshBasicMaterial({color:0xffff00});var mesh = new THREE.Mesh(g,m);// 加入到场景中scene.add(mesh);  });}function threeStart(){initScene();initCamera();initRenderer();initLight();initObject();init3DText();// 渲染animate();}        function animate(){            requestAnimationFrame( animate );             // 渲染            renderer.render(scene,camera);           }</script></head><body onload="threeStart();"><div id="canvas-frame"></div></body></html>

阅读全文

0 0