❌

普通视图

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

从“无”到“有”：手动实现一个 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开发干货

昨天以前首页

C# 正则表达式（5）：前瞻/后顾（Lookaround）——零宽断言做“条件校验”和“精确提取”

✇掘金 前端
作者 烛阴
2026年1月6日 22:44
一、四种 Lookaround 语法总览 1. 正向前瞻（必须能看到…） 2. 负向前瞻（必须看不到…） 3. 正向后顾（前面必须是…） 4. 负向后顾（前面必须不是…） 二、前瞻：最常见的“密码/复
❌
❌