codecamp

three.js TextGeometry

一个用于将文本生成为单一的几何体的类。 它是由一串给定的文本,以及由加载的font(字体)和该几何体ExtrudeGeometry父类中的设置所组成的参数来构造的。

代码示例

const loader = new FontLoader();

loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {

	const geometry = new TextGeometry( 'Hello three.js!', {
		font: font,
		size: 80,
		height: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelSegments: 5
	} );
} );

例子

geometry / text

构造器

TextGeometry(text : String, parameters : Object)

text — 将要显示的文本。

parameters — 包含有下列参数的对象:

  • font — THREE.Font的实例。
  • size — Float。字体大小,默认值为100。
  • height — Float。挤出文本的厚度。默认值为50。
  • curveSegments — Integer。(表示文本的)曲线上点的数量。默认值为12。
  • bevelEnabled — Boolean。是否开启斜角,默认为false。
  • bevelThickness — Float。文本上斜角的深度,默认值为20。
  • bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
  • bevelSegments — Integer。斜角的分段数。默认值为3。

可用的字体

文本几何体使用 typeface.json所生成的字体。 一些已有的字体可以在/examples/fonts中找到,且必须在页面中引入。

字体 字重 风格 文件路径
helvetiker normal normal /examples/fonts/helvetiker_regular.typeface.json
helvetiker bold normal /examples/fonts/helvetiker_bold.typeface.json
optimer normal normal /examples/fonts/optimer_regular.typeface.json
optimer bold normal /examples/fonts/optimer_bold.typeface.json
gentilis normal normal /examples/fonts/gentilis_regular.typeface.json
gentilis bold normal /examples/fonts/gentilis_bold.typeface.json
droid sans normal normal /examples/fonts/droid/droid_sans_regular.typeface.json
droid sans bold normal /examples/fonts/droid/droid_sans_bold.typeface.json
droid serif normal normal /examples/fonts/droid/droid_serif_regular.typeface.json
droid serif bold normal /examples/fonts/droid/droid_serif_bold.typeface.json

属性

共有属性请参见其基类ExtrudeGeometry。

.parameters : Object

一个包含着构造函数中每个参数的对象。在对象实例化之后,对该属性的任何修改都不会改变这个几何体。

方法(Methods)

共有方法请参见其基类ExtrudeGeometry。

源代码

examples/jsm/geometries/TextGeometry.js


three.js ParametricGeometry
three.js LightProbeHelper
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

参考

核心 / BufferAttributes

渲染器 / WebXR

开发者参考

WebGL渲染器

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }