我用three.js做了3d文字,祝群里的大佬们中秋节快乐

国服第二切图仔 荣耀黄金
前端领域新星创作者
2022-08-31 10:01:56


 篇幅较多,部分核心代码展示:
麻烦之处在于中文字体引入及优化

			let text ='中秋节快乐',

				bevelEnabled = true,

				font = undefined,

				fontName = 'optimer', // helvetiker, optimer, gentilis, droid sans, droid serif
				fontWeight = 'bold'; // normal bold

			const height = 20,
				size = 50,
				hover = 30,

				curveSegments = 4,

				bevelThickness = 2,
				bevelSize = 1.5;

			const mirror = true;

			const fontMap = {

				'helvetiker': 0,
				'optimer': 1,
				'gentilis': 2,
				'droid/droid_sans': 3,
				'droid/droid_serif': 4

			};

function loadFont() {

	const loader = new FontLoader();

	loader.load( './asset/fonts/ttf/STXihei_Regular.json', function ( response ) {
					font = response;
					refreshText();
				} );

			}
function refreshText() {

				updatePermalink();

				group.remove( textMesh1 );
				if ( mirror ) group.remove( textMesh2 );

				if ( ! text ) return;

				createText();

			}

function createText() {

				textGeo = new TextGeometry( text, {

					font: font,

					size: size,
					height: height,
					curveSegments: curveSegments,

					bevelThickness: bevelThickness,
					bevelSize: bevelSize,
					bevelEnabled: bevelEnabled

				} );

				textGeo.computeBoundingBox();

				const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

				textMesh1 = new THREE.Mesh( textGeo, materials );

				textMesh1.position.x = centerOffset;
				textMesh1.position.y = hover;
				textMesh1.position.z = 0;

				textMesh1.rotation.x = 0;
				textMesh1.rotation.y = Math.PI * 2;

				group.add( textMesh1 );

				if ( mirror ) {

					textMesh2 = new THREE.Mesh( textGeo, materials );

					textMesh2.position.x = centerOffset;
					textMesh2.position.y = - hover;
					textMesh2.position.z = height;

					textMesh2.rotation.x = Math.PI;
					textMesh2.rotation.y = Math.PI * 2;

					group.add( textMesh2 );

				}

			}

 

...全文
174 1 打赏 收藏 举报
写回复
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
月谷丶 倔强青铜 2022-09-01
  • 打赏
  • 举报
回复

支持一下太棒了

发帖
国服第二切图仔(带你学前端)

275

社区成员

跟着资深前端工程师一起来学前端吧,这里不仅有你想要的实战前端学习资料和面试题,也有良好的前端社区氛围互相学习共同探讨,更有奖品丰厚的社区活动,加入,你就是下一个国服第一切图仔~
vue.js前端微信小程序 个人社区
社区管理员
  • 国服第二切图仔
  • 不渴望力量的哈士奇
  • 小明java问道之路
加入社区
帖子事件
创建了帖子
2022-08-31 10:01
社区公告

成长一夏”第二期 ——「创作之秋」活动上线啦~

CSDN 官方提供了更多奖品、更好的活动参与体验,欢迎大家报名参与!

本次我将作为创作领航导师,提供创作建议与指导,和大家一起在本社区完成创作挑战。

CSDN 官方将按活动期间(即日起-10月9日)各位原创合格质量的文章数进行排名,给予不同奖励哦!

快在本活动帖下完成报名吧!


活动地址:https://bbs.csdn.net/topics/608117699