Three.js在vue中的使用（一）-基础

Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，它简化了在网页中创建和渲染 3D 场景的复杂性。Three.js 提供了丰富的功能，如光照、材质、几何体、动画、控制器等，使得开发者可以快速构建交互式的 3D 应用。

---

🧠 Three.js 原理概述

1. WebGL 基础

• Three.js 底层使用 WebGL（Web Graphics Library）进行图形渲染。
• WebGL 是一种低级 API，允许直接操作 GPU 进行高性能图形绘制。
• Three.js 对 WebGL 进行封装，屏蔽了底层复杂性。

2. 核心组件

Three.js 的基本结构通常包括以下几个核心对象：

组件	作用
Scene	场景，是所有 3D 对象的容器
Camera	摄像机，决定从哪个角度观察场景（常用 PerspectiveCamera）
Renderer	渲染器，负责将场景和摄像机的内容渲染到 HTML 页面中的 canvas 元素
Mesh	网格对象，由几何体（Geometry）和材质（M