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

最新推荐文章于 2024-02-05 09:47:25 发布

hbliu_ren

最新推荐文章于 2024-02-05 09:47:25 发布

阅读量2.4k

点赞数

分类专栏： ThreeJS

ThreeJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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 οnlοad="threeStart();">
	<div id="canvas-frame"></div>
</body>
</html>

hbliu_ren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ThreeJS学习笔记（4）-3D文字

var scene,camera,render; var loader = new THREE.FontLoader(); //导入字体，设定字体，这里的话，你们找对自己的字体路径，可能和我的不一样的！！下载的three.js包里面examples/fonts里面有字体 loader.load('../examples/fonts/helvetike
复制链接

扫一扫