新增博文3d letters

2025-08-07 11:43:18 +08:00
parent b2a11c0fb6
commit 84902846e7
12 changed files with 257 additions and 51 deletions
--- a/src/app/[locale]/blogs/Create-3D-Letters/1024_576.png
+++ b/src/app/[locale]/blogs/Create-3D-Letters/1024_576.png
--- a/src/app/[locale]/blogs/Create-3D-Letters/512_288.png
+++ b/src/app/[locale]/blogs/Create-3D-Letters/512_288.png
--- a/src/app/[locale]/blogs/Create-3D-Letters/blog-prompt.txt
+++ 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。
--- a/src/app/[locale]/blogs/Create-3D-Letters/en.tsx
+++ 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 (
+    <Flex gap={"4"} direction={"column"} justify={"start"} className='text-left'>
+      <Heading as="h1" size="7" mb="4" className='text-center'>How to Create Stunning 3D Letters Online for Free</Heading>
+
+      <Flex justify={"center"}>
+        <Image src={img} alt="Barbie Font Sample" width={1024} height={576} />
+      </Flex>
+
+      <Text as="p" mb="4">
+        If you're looking to generate eye-catching <strong>3D letters</strong> for your design, presentation, or content project, you're in the right place. Here's a simple step-by-step guide using <Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">Fast3DText.com</Link>, a free online 3D text generator that lets you design and export high-quality 3D letter images with ease.
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🎯 Steps to Create 3D Letters</Heading>
+
+      <Heading as="h3" size="4" mt="4" mb="2">1. Open the Editor</Heading>
+      <Text as="p" mb="4">
+        Go to 👉 <Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">https://fast3dtext.com/editor</Link>
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">2. Enter Your Letters</Heading>
+      <Text as="p" mb="4">
+        Type the letters or words you want to turn into 3D. Separate each letter with a space to control individual layout.<br />
+        Example: <code>F A S T</code>
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">3. Customize the Style</Heading>
+      <Text as="p" mb="2">
+        Choose your favorite:
+      </Text>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li><strong>Font</strong>: Select from popular 3D-compatible fonts</li>
+        <li><strong>Background</strong>: Solid, gradient, or transparent</li>
+        <li><strong>Color</strong>: Solid fill, gradients, metallic tones, etc.</li>
+      </ul>
+
+      <Heading as="h3" size="4" mt="4" mb="2">4. Adjust the 3D View</Heading>
+      <Text as="p" mb="4">
+        Drag and rotate the scene to change the 3D angle. Make your letters pop with the perfect perspective.
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">5. Export Your Image</Heading>
+      <Text as="p" mb="4">
+        Click the <strong>Download</strong> button to save your 3D letters as a high-quality image (<code>.png</code>).
+      </Text>
+    </Flex>
+  );
+}
--- a/src/app/[locale]/blogs/Create-3D-Letters/page.tsx
+++ 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 (
+    <Flex direction={"column"} gap={"4"}>
+      <Header />
+      <Flex justify={"center"} >
+
+        <Box className="md:w-2/3 w-full">
+          {locale == "en" && (<En></En>)}
+          {locale == "zh" && (<Zh></Zh>)}
+        </Box>
+
+      </Flex>
+      <Footer />
+    </Flex>
+  )
+}
+
+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<Metadata> {
+  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}`,
+      },
+    },
+  };
+}
--- a/src/app/[locale]/blogs/Create-3D-Letters/zh.tsx
+++ 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 (
+    <Flex gap={"4"} direction={"column"} justify={"start"} className='text-left'>
+      <Heading as="h1" size="7" mb="4" className='text-center'>如何免费在线创建惊艳的3D字母</Heading>
+
+
+
+      <Flex justify={"center"}>
+        <Image src={img} alt="Barbie Font Sample" width={1024} height={576} />
+      </Flex>
+
+      <Text as="p" mb="4">
+        如果你想为设计、演示或内容项目生成引人注目的<strong>3D字母</strong>，你来对地方了。以下是使用<Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">Fast3DText.com</Link>的简单分步指南，这是一个免费的在线3D文本生成器，可以轻松设计和导出高质量的3D字母图像。
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🎯 创建3D字母的步骤</Heading>
+
+      <Heading as="h3" size="4" mt="4" mb="2">1. 打开编辑器</Heading>
+      <Text as="p" mb="4">
+        前往 👉 <Link href="https://fast3dtext.com/editor" target="_blank">https://fast3dtext.com/editor</Link>
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">2. 输入你的字母</Heading>
+      <Text as="p" mb="4">
+        输入你想转换为3D的字母或单词。用空格分隔每个字母以控制单个布局。<br />
+        示例: <code>F A S T</code>
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">3. 自定义样式</Heading>
+      <Text as="p" mb="2">
+        选择你喜欢的:
+      </Text>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li><strong>字体</strong>: 从流行的3D兼容字体中选择</li>
+        <li><strong>背景</strong>: 纯色、渐变或透明</li>
+        <li><strong>颜色</strong>: 纯色填充、渐变、金属色调等</li>
+      </ul>
+
+      <Heading as="h3" size="4" mt="4" mb="2">4. 调整3D视图</Heading>
+      <Text as="p" mb="4">
+        拖动并旋转场景以改变3D角度。让你的字母以完美的视角弹出。
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">5. 导出你的图像</Heading>
+      <Text as="p" mb="4">
+        点击<strong>下载</strong>按钮将你的3D字母保存为高质量图像(<code>.png</code>)。
+      </Text>
+    </Flex>
+  );
+}
--- 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
@@ -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。
--- 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<Metadata> {
  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,
--- 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[];
--- 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 *));
--- 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({
    <Box className="space-y-4 p-4 border rounded-lg min-w-64">
      <Heading as="h2" size="4" className="font-medium text-lg">{t("title")}</Heading>
      <Flex gap={"2"} p="2">
-        <Flex gap={"1"} align={"center"}>
-          <Radio name="background-type" value="1" checked={background.type === "color"} onChange={() =>
-            setBackground({
-              type: "color",
-              color: background.color,
-              image: background.image,
-            })
-          } />
-          <Text size="2">{t("colorOption")}</Text>
-        </Flex>

-        <Flex gap={"1"} align={"center"}>
-          <Radio name="background-type" value="1" checked={background.type === "image"} onChange={() =>
-            setBackground({
-              type: "image",
-              color: background.color,
-              image: background.image,
-            })
-          } />
-          <Text size="2">{t("imageOption")}</Text>
-        </Flex>
+        <RadioGroup.Root value={background.type} name="backgroundType" orientation="horizontal" onValueChange={(value) => setBackground({ ...background, type: value as BackgroundType })}>
+          <RadioGroup.Item value="color">{t("colorOption")}</RadioGroup.Item>
+          <RadioGroup.Item value="image">{t("imageOption")}</RadioGroup.Item>
+        </RadioGroup.Root>
+
      </Flex>

      <Box className="w-full">
--- 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(