Three.js使用TextBufferGeometry创建3D文本

ゝ一世哀愁。 2023-06-12 11:24 86阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

我们知道在Web前端上，可以用CSS样式设置多种多样的二维字体格式。如果我们想文本当成3D几何绘制在场景中，即生成3D文本来提升场景的逼格，可不可以呢？答案是肯定的，Three.js中提供了绘制文本的接口，TextGeometry和TextBufferGeometry，使用这两个接口，再配合FontLoader就可以实现3D字体的绘制和加载啦。

这里需要使用到Three.js的FontLoader来加载样式数据，然后对字体的样式进行设置：

loader = new FontLoader();
    loader.load( 'fonts/gentilis_regular.typeface.json', ( font ) => {
        // TODO 设置样式
    })

等字体创建号之后，为了更加凸显字体的效果，可以使用OutlineEffect这个接口，对字体进行描边：

effect = new OutlineEffect( renderer );
    
    effect.render( scene, camera );

下面笔者做了一个demo,先来看demo的效果：

![20191112202923941.gif][]

### **Demo代码：** ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Text</title>
    	<style>
    		body {
    			margin: 0;
    			overflow: hidden;
    		}
    	</style>
    </head>
    <body>
    	<script type="module">
    		import {
    			Scene,
    			WebGLRenderer,
    			PerspectiveCamera,
    			FontLoader,
    			Color,
    			TextBufferGeometry,
    			MeshBasicMaterial,
    			Mesh,
    			Vector3,
    			SpotLight,
    			DirectionalLight,
    			AmbientLight,
    		} from "../build/three.module.js";
    
    		import { OutlineEffect } from "../examples/jsm/effects/OutlineEffect.js";
    		import Stats from './../examples/jsm/libs/stats.module.js';
    		import { GUI } from "../examples/jsm/libs/dat.gui.module.js";
    		import { OrbitControls } from "../examples/jsm/controls/OrbitControls.js";
    
    		let container, scene, renderer, camera, ambientLight, directionLight, loader, effect;
    		let gui, stats, orbit;
    		const w = window.innerWidth, h = window.innerHeight;
    
    
    		function initScene() {
    
    			container = document.createElement( 'div' );
    			document.body.append( container );
    
    			stats = new Stats();
    			container.appendChild( stats.domElement );
    
    			scene = new Scene();
    			scene.background = new Color( 0x339966 );
    			// scene.fog = new THREE.Fog( 0xffffff, 0x444444 );
    
    			renderer = new WebGLRenderer( { antialias: true } );
    			renderer.setPixelRatio( window.devicePixelRatio );
    			renderer.setSize( w, h );
    			renderer.shadowMap.enabled = false;
    			container.appendChild( renderer.domElement );
    			renderer.gammaInput = true;
    			renderer.gammaOutput = true;
    
    			camera = new PerspectiveCamera( 45, w / h, 1, 1000 );
    			camera.position.set( 0, 0, 300 );
    			camera.lookAt( new Vector3( 0, 0, 0 ) );
    
    			orbit = new OrbitControls( camera, renderer.domElement );
    			orbit.enableZoom = true;
    			orbit.enableKeys = false;
    
    			ambientLight = new AmbientLight( 0x141414 );
    			scene.add( ambientLight );
    
    			directionLight = new DirectionalLight( 0xffffff );
    			directionLight.position.set( 0, 200, 100 );
    			directionLight.castShadow = true;
    			directionLight.shadow.camera.top = 180;
    			directionLight.shadow.camera.bottom = - 100;
    			directionLight.shadow.camera.left = - 120;
    			directionLight.shadow.camera.right = 120;
    			scene.add( directionLight );
    
    
    			loader = new FontLoader();
    			loader.load( 'fonts/gentilis_regular.typeface.json', ( font ) => {
    
    				addText( 'WebGL', font, new Vector3( - 60, 30, 0 ), 0xCC0000 );
    				addText( 'THREE.JS', font, new Vector3( - 30, 0, 0 ), 0x000000 );
    				addText( 'Graph', font, new Vector3( 80, 10, - 10 ), 0x669000 );
    				addText( 'TextBufferGeometry', font, new Vector3( - 0, - 30, 0 ), 0xffffff );
    
    			} );
    
    			effect = new OutlineEffect( renderer );
    		}
    
    		function addText( name, font, location, color ) {
    
    			let textGeometry = new TextBufferGeometry( name, {
    				font: font,
    				size: 20,
    				height: 2,
    				curveSegments: 10
    			} );
    
    			let textMaterial = new MeshBasicMaterial( { color: color } );
    			let textMesh = new Mesh( textGeometry, textMaterial );
    			textMesh.position.copy( location );
    			scene.add( textMesh );
    
    		}
    
    		function render() {
    
    			effect.render( scene, camera );
    			stats.update();
    			orbit.update();
    			requestAnimationFrame( render );
    
    		}
    
    		initScene();
    		render();
    
    	</script>
    
    </body>
    </html>

[20191112202923941.gif]: https://img-blog.csdnimg.cn/20191112202923941.gif