❌

普通视图

发现新文章，点击刷新页面。
昨天 — 2026年1月14日首页

3D字体TextGeometry

✇掘金 前端
作者 烛阴
2026年1月14日 22:42

1. 引入字体加载器

由于 TextGeometry 不是核心库的一部分，我们需要单独引入：

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';

2. 加载 JSON 字体并创建

Three.js 不直接读取 .ttf，它读取的是专用的 JSON 字体文件。

import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
import local_font from '../../assets/font/helvetiker_bold.typeface.json';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222); // 深灰色背景

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new FontLoader();
console.log('开始加载字体...');

let font = loader.parse(local_font);
const textGeometry = new TextGeometry('Hello Three.js!', {
    font: font,
    size: 1,
    depth: 0.5,
    curveSegments: 12,
    bevelEnabled: false,
});

textGeometry.center();

const textMaterial = new THREE.MeshNormalMaterial();
let textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.position.set(0, 0, 0); // 确保在原点
scene.add(textMesh);
console.log('文字网格已添加到场景');

function animate() {
    requestAnimationFrame(animate);

    if (textMesh) {
        textMesh.rotation.y += 0.01;
    }

    renderer.render(scene, camera);
}
animate();
console.log('动画循环已启动');

📂 核心代码与完整示例：    my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货

昨天以前首页

从“无”到“有”：手动实现一个 3D 渲染循环全过程

✇掘金 前端
作者 烛阴
2026年1月12日 22:34

一、 Three.js 的基本构成

  1. Scene ：场景。
  2. Camera ：摄像机。
  3. Renderer ：渲染器，。

二、具体实现

1. 初始化场景 (The Scene)

场景是一切物体的容器。

const scene = new THREE.Scene();
// 💡 INTP 视角：把它想象成一个坐标系原点为 (0,0,0) 的无限空腔。

2. 配置相机 (The Camera)

最常用的是 透视相机（PerspectiveCamera） ，它模拟了人眼的“近大远小”效果。

const camera = new THREE.PerspectiveCamera(
    75, // 视角 (Field of View)
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近剪裁面
    1000 // 远剪裁面
);
camera.position.z = 5; // 将相机后退 5 个单位，否则会在物体中心

3. 加入材质 (The Mesh)

一个物体由两部分组成：

  • 几何体(Geometry)
  • 材质(Material)
const geometry = new THREE.BoxGeometry(1, 1, 1); // 形状：立方体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质：基础绿色
const cube = new THREE.Mesh(geometry, material); // 组合成网格
scene.add(cube); // 必须添加到场景中

4. 渲染与循环 (The Render Loop)

这是最关键的一步。我们需要每一秒刷新 60 次屏幕，才能看到动画。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
    requestAnimationFrame(animate); // 核心：请求下一帧
    
    // 让物体动起来，增加一点生命力
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera); // 真正绘制的一行
}
animate();

📂 核心代码与完整示例：   my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货

拒绝配置地狱！5 分钟搭建 Three.js + Parcel 完美开发环境

✇掘金 前端
作者 烛阴
2026年1月11日 21:35

1. 序言

Parcel 不需要复杂的配置文件，你只需要指明一个 index.html，可以有效节省你在开发环境上配置时间。

2. 初始化

首先，我们需要一个干净的目录。打开终端，输入以下命令：

mkdir three-parcel-demo
cd three-parcel-demo
npm init -y
npm install --save-dev parcel-bundler
npm install three

然后在package.json的scripts里面添加运行入口：

 "scripts": {
    "dev": "npx parcel src/index.html",
    "build": "npx parcel build src/index.html"
  },

3. 项目结构搭建

Parcel 的强大在于它支持 HTML 入口。

  • index.html: 骨架
  • src/main.js: 灵魂
  • src/style.css: 皮肤

4. 编写核心代码

在 index.html 中引入脚本和样式表：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/style.css"/>
</head>
<body>
    <canvas id="three-canvas"></canvas>
    <script src="./main/main.js" type="module"></script>
</body>
</html>

在 src/main.js 中快速启动：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#three-canvas') });

renderer.setSize(window.innerWidth, window.innerHeight);

// 添加一个极简的几何体
const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.z = 3;

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

5. 启动与魔法

现在，一个最简单的3D 开发环境已经搭建完成了，只需要在命令行输入：

npm run dev

如此，你就可以在 http://localhost:1234 查看效果。

📂 核心代码与完整示例：  my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货

❌
❌