当前位置：首页 > news >正文

【Three.js】JS 3D library（一个月进化史）

news 来源：原创 2025/9/21 13:16:36

#春节过完了，该继续投入学习了~ 作为一个平面开发者，想要增进更多的技能，掌握web3D开发#

前置知识与技能
1. JavaScript 基础
- 掌握ES6+语法（类、模块、箭头函数、解构等）
- 熟悉异步编程（Promise、async/await）
- 了解事件循环和DOM操作

2. HTML5 和 CSS3
- 熟悉Canvas和WebGL的基础概念
- 了解CSS3动画和变换（transform、transition）

3. 基础数学知识
- 向量和矩阵：理解三维空间中的位置、旋转和缩放
- 坐标系：掌握三维坐标系（世界坐标、局部坐标）
- 三角函数：用于计算旋转和动画
- 线性代数基础：了解矩阵乘法、向量点积和叉积（可选，但对高级功能有帮助）

4. WebGL 基础概念
- 了解WebGL渲染管线（顶点着色器、片段着色器）
- 理解缓冲区、纹理和帧缓冲
- 了解GPU渲染的基本原理

5. 前端工程化
- 熟悉模块化开发（ES Modules、CommonJS）
- 掌握打包工具（Webpack、Vite）
- 了解TypeScript（Three.js官方示例大量使用TS）

Day 1

了解熟悉Three.js，着重基础理论

学习资源：

前端可视化从0-1

Day 2

写一个简易demo

搭建环境-->安装包-->创建场景

// 创建场景
const scene = new THREE.Scene();// 相机
const camera = new THREE.PerspectiveCamera( // 透视相机75, // 垂直视野角度window.innerWidth / window.innerHeight, // 输出图像宽高比0.1, // near plane1000, // far plane
);
camera.position.set(0, 2, 10);// 渲染器--画布
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 物体
const geoMetry = new THREE.BoxGeometry(1, 1, 1); // 几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
const cube = new THREE.Mesh(geoMetry, material); // Mesh 网格
scene.add(cube);// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

补充计算机图形学（前置知识） episode1

学习资源：

GAMES101-现代计算机图形学入门-闫令琪

Day 3

复习线性代数

补充线性代数（前置知识） episode2