diff --git a/src/app/[locale]/blogs/Create-3D-Letters/1024_576.png b/src/app/[locale]/blogs/Create-3D-Letters/1024_576.png
new file mode 100644
index 0000000..036eb72
Binary files /dev/null and b/src/app/[locale]/blogs/Create-3D-Letters/1024_576.png differ
diff --git a/src/app/[locale]/blogs/Create-3D-Letters/512_288.png b/src/app/[locale]/blogs/Create-3D-Letters/512_288.png
new file mode 100644
index 0000000..295e3dd
Binary files /dev/null and b/src/app/[locale]/blogs/Create-3D-Letters/512_288.png differ
diff --git a/src/app/[locale]/blogs/Create-3D-Letters/blog-prompt.txt b/src/app/[locale]/blogs/Create-3D-Letters/blog-prompt.txt
new file mode 100644
index 0000000..77376e5
--- /dev/null
+++ b/src/app/[locale]/blogs/Create-3D-Letters/blog-prompt.txt
@@ -0,0 +1,7 @@
+我要写一篇博文,介绍如何创建3d letters。你是一个专业的SEO优化师,从seo的角度来帮我组织这个blog。
+1 打开 https://fast3dtext.com/editor
+2 输入想要的letters, 中间用空格隔开
+3 调整背景、字体、颜色
+4 操控三维视角
+5 生成图片并下载
+至此,即可 创建 想要的 3d letters。
diff --git a/src/app/[locale]/blogs/Create-3D-Letters/en.tsx b/src/app/[locale]/blogs/Create-3D-Letters/en.tsx
new file mode 100644
index 0000000..9325577
--- /dev/null
+++ b/src/app/[locale]/blogs/Create-3D-Letters/en.tsx
@@ -0,0 +1,52 @@
+import { Box, Heading, Text, Link, Flex } from '@radix-ui/themes';
+import Image from 'next/image';
+import img from "./1024_576.png";
+
+export default function Page() {
+ return (
+
+ How to Create Stunning 3D Letters Online for Free
+
+
+
+
+
+
+ If you're looking to generate eye-catching 3D letters for your design, presentation, or content project, you're in the right place. Here's a simple step-by-step guide using Fast3DText.com, a free online 3D text generator that lets you design and export high-quality 3D letter images with ease.
+
+
+ 🎯 Steps to Create 3D Letters
+
+ 1. Open the Editor
+
+ Go to 👉 https://fast3dtext.com/editor
+
+
+ 2. Enter Your Letters
+
+ Type the letters or words you want to turn into 3D. Separate each letter with a space to control individual layout.
+ Example: F A S T
+
+
+ 3. Customize the Style
+
+ Choose your favorite:
+
+
+
Font: Select from popular 3D-compatible fonts
+
Background: Solid, gradient, or transparent
+
Color: Solid fill, gradients, metallic tones, etc.
+
+
+ 4. Adjust the 3D View
+
+ Drag and rotate the scene to change the 3D angle. Make your letters pop with the perfect perspective.
+
+
+ 5. Export Your Image
+
+ Click the Download button to save your 3D letters as a high-quality image (.png).
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/[locale]/blogs/Create-3D-Letters/page.tsx b/src/app/[locale]/blogs/Create-3D-Letters/page.tsx
new file mode 100644
index 0000000..2cce69f
--- /dev/null
+++ b/src/app/[locale]/blogs/Create-3D-Letters/page.tsx
@@ -0,0 +1,97 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { Box, Flex, } from "@radix-ui/themes";
+import { useLocale } from "next-intl";
+import En from "./en";
+import Zh from "./zh";
+import { Locales } from "@/i18n/config";
+import { Metadata } from "next";
+import Cover2 from "./512_288.png";
+
+export const Blog = {
+ id: "Create-3D-Letters",
+ date: "2025-08-07",
+ cover: Cover2,
+ en: {
+ title: "How to Create Stunning 3D Letters Online for Free",
+ summary:
+ "Learn how to create stunning 3D letters online using Fast3DText — a free 3D text generator. This step-by-step guide walks you through customizing fonts, colors, background, and 3D angles, then exporting high-quality 3D text images. No design skills required.",
+ },
+ zh: {
+ title: "如何快速创建炫酷的 3D 字母图像(免安装)",
+ summary:
+ "本文教你如何使用 Fast3DText 在线生成个性化的 3D 字母 图像。通过输入文字、调整字体和颜色、操控三维视角,你可以一键导出高清立体文字图片,无需任何设计基础,适用于封面、海报和社交媒体内容。",
+ },
+};
+export default function Page() {
+
+ const locale = useLocale() as "en" | "zh";
+
+ return (
+
+
+
+
+
+ {locale == "en" && ()}
+ {locale == "zh" && ()}
+
+
+
+
+
+ )
+}
+
+const host = process.env.NEXT_PUBLIC_HOST;
+
+const locales = Locales;
+
+export function generateStaticParams() {
+ return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+ params,
+}: {
+ params: Promise<{ locale: string }>;
+}): Promise {
+ const { locale } = await params;
+
+ const name = Blog.id;
+ const title = Blog[locale as "en" | "zh"].title;
+ const description = Blog[locale as "en" | "zh"].summary;
+ return {
+ title,
+ description,
+ keywords: [],
+ openGraph: {
+ title,
+ description,
+ url: `${host}/${locale}/blogs/${name}`,
+ images: [
+ {
+ url: `${process.env.NEXT_PUBLIC_HOST}/og-image.png`,
+ width: 1200,
+ height: 630,
+ alt: title,
+ },
+ ],
+ locale: locale,
+ type: "website",
+ },
+ twitter: {
+ card: "summary_large_image",
+ title,
+ description,
+ images: [`${process.env.NEXT_PUBLIC_HOST}/og-image.png`],
+ },
+ alternates: {
+ canonical: `${host}/blogs/${name}`,
+ languages: {
+ en: `${host}/en/blogs/${name}`,
+ zh: `${host}/zh/blogs/${name}`,
+ },
+ },
+ };
+}
diff --git a/src/app/[locale]/blogs/Create-3D-Letters/zh.tsx b/src/app/[locale]/blogs/Create-3D-Letters/zh.tsx
new file mode 100644
index 0000000..d312e7a
--- /dev/null
+++ b/src/app/[locale]/blogs/Create-3D-Letters/zh.tsx
@@ -0,0 +1,54 @@
+import { Box, Heading, Text, Link, Flex } from '@radix-ui/themes';
+import Image from 'next/image';
+import img from "./1024_576.png";
+
+export default function Page() {
+ return (
+
+ 如何免费在线创建惊艳的3D字母
+
+
+
+
+
+
+
+
+ 如果你想为设计、演示或内容项目生成引人注目的3D字母,你来对地方了。以下是使用Fast3DText.com的简单分步指南,这是一个免费的在线3D文本生成器,可以轻松设计和导出高质量的3D字母图像。
+
+
+ 🎯 创建3D字母的步骤
+
+ 1. 打开编辑器
+
+ 前往 👉 https://fast3dtext.com/editor
+
+
+ 2. 输入你的字母
+
+ 输入你想转换为3D的字母或单词。用空格分隔每个字母以控制单个布局。
+ 示例: F A S T
+
+
+ 3. 自定义样式
+
+ 选择你喜欢的:
+
+
+
字体: 从流行的3D兼容字体中选择
+
背景: 纯色、渐变或透明
+
颜色: 纯色填充、渐变、金属色调等
+
+
+ 4. 调整3D视图
+
+ 拖动并旋转场景以改变3D角度。让你的字母以完美的视角弹出。
+
+
+ 5. 导出你的图像
+
+ 点击下载按钮将你的3D字母保存为高质量图像(.png)。
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/blog-prompt.txt b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/blog-prompt.txt
new file mode 100644
index 0000000..acbfdf9
--- /dev/null
+++ b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/blog-prompt.txt
@@ -0,0 +1,5 @@
+我要写一篇博文,介绍如何使用 Barbie font 来创建3d text。你是一个专业的SEO优化师,从seo的角度来帮我组织这个blog。
+1 从 https://www.fontbolt.com/font/barbie-font/ 下载字体文件。
+2 将ttf文件通过 https://gero3.github.io/facetype.js/ 转化成json文件
+3 在 https://fast3dtext.com/editor 中,上传json文件,并选中该文件
+至此,即可 创建 barbie font 的 3d text。
\ No newline at end of file
diff --git a/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/page.tsx b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/page.tsx
index cfc331d..b7eceb1 100644
--- a/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/page.tsx
+++ b/src/app/[locale]/blogs/Create-3D-Text-with-the-Barbie-Font/page.tsx
@@ -7,6 +7,23 @@ import Zh from "./zh";
import { Locales } from "@/i18n/config";
import { Metadata } from "next";
+import Cover1 from "./512_288.png";
+export const Blog = {
+ id: "Create-3D-Text-with-the-Barbie-Font",
+ date: "2025-08-01",
+ cover: Cover1,
+ en: {
+ title: "How to Create 3D Text with the Barbie Font",
+ summary:
+ "Learn how to create 3D text with the Barbie font using free online tools. Step-by-step guide to download, convert, and render Barbie-style 3D text — no coding required!",
+ },
+ zh: {
+ title: "如何使用Barbie字体创建3D文本",
+ summary:
+ "学习如何使用免费在线工具,以芭比字体创建 3D 文本。下载、转换和渲染芭比风格 3D 文本的分步指南 —— 无需编码!",
+ },
+};
+
export default function Page() {
const locale = useLocale() as "en" | "zh";
@@ -44,22 +61,13 @@ export async function generateMetadata({
}): Promise {
const { locale } = await params;
- const name = "Create-3D-Text-with-the-Barbie-Font";
-
- const title = "How to Create 3D Text with the Barbie Font (Free & Online Method)";
- const description = " Want to create stylish 3D text using the iconic Barbie font? In this tutorial, you'll learn how to generate 3D Barbie-style text using free online tools — no design experience needed.We'll show you how to download the Barbie font, convert it to a 3D-ready format, and render it with an intuitive online editor."
+ const name = Blog.id;
+ const title = Blog[locale as "en" | "zh"].title;
+ const description = Blog[locale as "en" | "zh"].summary;
return {
title,
description,
- keywords: [
- 'barbie font 3d online',
- 'barbie 3d text maker',
- 'how to use barbie font',
- 'barbie text generator free',
- 'convert ttf to json font',
- 'three.js custom font 3d',
- 'fast3dtext tutorial'
- ],
+ keywords: [],
openGraph: {
title,
description,
diff --git a/src/app/[locale]/blogs/list.ts b/src/app/[locale]/blogs/list.ts
index 59319ce..7dbf2c1 100644
--- a/src/app/[locale]/blogs/list.ts
+++ b/src/app/[locale]/blogs/list.ts
@@ -13,21 +13,10 @@ export interface BlogItem {
}
import { StaticImageData } from "next/image";
-import Cover1 from "./Create-3D-Text-with-the-Barbie-Font/512_288.png";
+import { Blog as Create3DTextBlog } from "./Create-3D-Text-with-the-Barbie-Font/page";
+import { Blog as Create3DLetterBlog } from "./Create-3D-Letters/page";
+
export const blogs = [
- {
- id: "Create-3D-Text-with-the-Barbie-Font",
- date: "2024-01-01",
- cover: Cover1,
- en: {
- title: "How to Create 3D Text with the Barbie Font",
- summary:
- "Learn how to create 3D text with the Barbie font using free online tools. Step-by-step guide to download, convert, and render Barbie-style 3D text — no coding required!",
- },
- zh: {
- title: "如何使用Barbie字体创建3D文本",
- summary:
- "学习如何使用免费在线工具,以芭比字体创建 3D 文本。下载、转换和渲染芭比风格 3D 文本的分步指南 —— 无需编码!",
- },
- },
+ Create3DLetterBlog,
+ Create3DTextBlog,
] satisfies BlogItem[];
diff --git a/src/app/globals.css b/src/app/globals.css
index 8bfbb98..8533539 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,5 @@
-@import "tailwindcss";
@import "@radix-ui/themes/styles.css";
+@import "tailwindcss";
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
diff --git a/src/components/common/BackgroundSelector.tsx b/src/components/common/BackgroundSelector.tsx
index df6db4c..29cbd3a 100644
--- a/src/components/common/BackgroundSelector.tsx
+++ b/src/components/common/BackgroundSelector.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, Flex, Heading, Section, Radio } from "@radix-ui/themes";
+import { Box, Text, Flex, Heading, Section, Radio, RadioGroup } from "@radix-ui/themes";
import { useTranslations } from "next-intl";
export type BackgroundType = "color" | "image";
export interface BackgroundProp {
@@ -43,27 +43,12 @@ export default function BackgroundSelector({
{t("title")}
-
-
- setBackground({
- type: "color",
- color: background.color,
- image: background.image,
- })
- } />
- {t("colorOption")}
-
-
-
- setBackground({
- type: "image",
- color: background.color,
- image: background.image,
- })
- } />
- {t("imageOption")}
-
+ setBackground({ ...background, type: value as BackgroundType })}>
+ {t("colorOption")}
+ {t("imageOption")}
+
+
diff --git a/src/components/common/ThreeTools.ts b/src/components/common/ThreeTools.ts
index 17a9a48..bc7fc01 100644
--- a/src/components/common/ThreeTools.ts
+++ b/src/components/common/ThreeTools.ts
@@ -156,6 +156,15 @@ export async function updateTextProps(textProps: TextProp) {
let geo = await getTextGeometry(textProps);
textMesh.geometry.dispose();
textMesh.geometry = geo;
+
+ if (Array.isArray(textProps.color)) {
+ setGradient(
+ textProps.color,
+ textProps.colorGradientDir,
+ textMesh.geometry,
+ textMesh.material as THREE.MeshLambertMaterial
+ );
+ }
} else {
if (Array.isArray(textProps.color)) {
setGradient(