Three.js 学习笔记-三要素
一、Three.js 简介
（一）前世今生
Three.js 是一款运行在浏览器中的 3D 引擎，由 Ricardo Cabello（Mr.doob）在 2010 年 4 月于 GitHub 首次发布 。其起源可追溯到本世纪初，代码最初用 ActionScript 编写，2009 年移植到 JavaScript。随着 WebGL 出现，Paul Brunt 增加渲染功能，使 Three.js 设计为将绘制代码作为模块。Ricardo Cabello 负责 API 设计、创建 CanvasRenderer、SVGRenderer 并整合各种贡献。Branislav Ulicny 主要贡献在材质、着色器和后处理方面，Joshua Koo 创建了第一个面向 3D 文本的 Three.js 样本 。经过多年发展，Three.js 不断完善，已成为 Web 端创建 3D 场景和动画的重要工具，广泛应用于网页游戏、3D 产品展示、虚拟场景构建等领域 。
（二）作用
Three.js 基于原生 WebGL 封装，极大简化了在浏览器中创建和显示 3D 内容的过程。它提供了丰富的功能和接口，开发者无需深入掌握复杂的 WebGL 底层知识，就能轻松创建出精美的 3D 场景，包括各种几何形状、材质、光照效果、动画等，从而为网页带来更加生动、沉浸式的用户体验 。
二、Three.js 三要素
（一）相机（Camera）
相机决定了我们以何种视角观察 3D 场景，就如同现实生活中我们用眼睛看世界，眼睛的位置和观察方向决定了我们看到的画面。在 Three.js 中有多种相机类型，常用的是透视投影相机（PerspectiveCamera）和正投影相机（OrthographicCamera） 。
- 透视投影相机（PerspectiveCamera）
-
原理：模拟人眼观察世界的方式，遵循近大远小的规律。例如，当我们看一条笔直的公路，远处的部分看起来会比近处的窄，这就是透视效果。
-
参数：
-
fov（视场角）：相机视锥体垂直方向视野角度，好比我们人眼能看到的垂直范围，值越大，看到的范围越广，近大远小效果越明显。例如设置为 75 度，就确定了相机的视野范围。 -
aspect（宽高比）：视锥体宽度和高度的比值，一般设置为渲染区域（如 canvas 画布）的宽高比。比如画布宽度为 800px，高度为 600px，宽高比就是 800/600 = 4/3 。 -
near（近裁面）：相机视锥体近截面相对相机的距离，可理解为人眼能看清的最近距离，距离相机小于这个值的物体不会被渲染。 -
far（远裁面）：相机视锥体远截面相对相机的距离，即人眼能看到的最远距离，距离相机大于这个值的物体也不
-
)
)
)
