[{"content":" Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。\n01 学习目标 本节课从零搭建一个完整的 Three.js 项目，目标是：\n搭建 Vite + TypeScript + Three.js 项目脚手架 理解 Scene / Camera / Renderer 三件套的职责 掌握 requestAnimationFrame + delta time 动画循环 学会窗口自适应和像素比设置 02 Three.js 三件套 Three.js 的一切始于三个对象：\n对象 类比 职责 Scene 舞台 放置所有物体、灯光、相机的容器 Camera 摄像机 决定观众看到什么（位置、角度、范围） Renderer 投影仪 把 3D 场景计算成 2D 像素画到 canvas 上 const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000) const …","date":"2026-07-07","permalink":"/posts/threejs-project-architecture/","summary":" Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。\n01 学习目标 本节课从零搭建一个完整的 Three.js 项目，目标是：\n搭建 Vite + TypeScript + Three.js 项目脚手架 理解 Scene / Camera / Renderer 三件套的职责 掌握 …","tags":["threejs","typescript","webgl","3d"],"title":"Three.js 入门：从零搭建 3D 项目架构"},{"content":" 三角函数是描述周期性现象的核心工具，也是 3D 图形学的数学基础。本文从直角三角形出发，系统梳理三角函数的定义、公式、图像与反三角函数。\n01 基本定义 直角三角形定义 在直角三角形中，设角 $\\theta$ 为一个锐角：\n正弦 (sin)：$\\sin\\theta = \\frac{\\text{对边}}{\\text{斜边}}$ 余弦 (cos)：$\\cos\\theta = \\frac{\\text{邻边}}{\\text{斜边}}$ 正切 (tan)：$\\tan\\theta = \\frac{\\text{对边}}{\\text{邻边}} = \\frac{\\sin\\theta}{\\cos\\theta}$ 对边、邻边、斜边计算公式 已知三角函数值和一条边，可以求其他边：\n已知条件 对边 邻边 斜边 斜边 $c$ $a = c \\cdot \\sin\\theta$ $b = c \\cdot \\cos\\theta$ — 邻边 $b$ $a = b \\cdot \\tan\\theta$ — $c = \\frac{b}{\\cos\\theta}$ 对边 $a$ — $b = …","date":"2026-07-05","permalink":"/posts/trigonometry-guide/","summary":" 三角函数是描述周期性现象的核心工具，也是 3D 图形学的数学基础。本文从直角三角形出发，系统梳理三角函数的定义、公式、图像与反三角函数。\n01 基本定义 直角三角形定义 在直角三角形中，设角 $\\theta$ 为一个锐角：\n正弦 (sin)：$\\sin\\theta = \\frac{\\text{对边}}{\\text{斜边}}$ 余弦 (cos)：$\\cos\\theta = \\frac{\\text{ …","tags":["数学","三角函数","3d基础","threejs"],"title":"数学基础：三角函数完全指南"}]