编辑“︁JavaScript Three.js基础”︁（章节）

= JavaScript Three.js基础 =  
'''Three.js''' 是一个基于 [[WebGL]] 的轻量级 3D 图形库，用于在浏览器中创建和渲染交互式 3D 内容。它简化了 WebGL 的复杂性，使开发者能够更轻松地构建 3D 场景、动画和可视化效果。本章节将介绍 Three.js 的核心概念、基本用法和实际应用案例。

== 介绍 ==  
Three.js 由 Ricardo Cabello（Mr.doob）开发，是目前最流行的 JavaScript 3D 库之一。它提供了以下核心功能：  
* **场景（Scene）**：3D 对象的容器，用于管理所有可见元素。  
* **相机（Camera）**：定义用户视角，如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。  
* **渲染器（Renderer）**：将场景和相机渲染到 HTML 画布（Canvas）上。  
* **几何体（Geometry）**：定义 3D 对象的形状（如立方体、球体）。  
* **材质（Material）**：定义 3D 对象的外观（如颜色、纹理）。  
* **光源（Light）**：为场景添加光照效果（如点光源、平行光）。  

== 安装与基本设置 ==  
Three.js 可以通过 CDN 或 npm 安装：  

<syntaxhighlight lang="html">  
<!-- 通过 CDN 引入 Three.js -->  
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>  
</syntaxhighlight>  

或通过 npm：  
<syntaxhighlight lang="bash">  
npm install three  
</syntaxhighlight>  

=== 基本示例 ===  
以下是一个简单的 Three.js 场景代码，展示如何创建一个旋转的立方体：  

<syntaxhighlight lang="javascript">  
// 1. 创建场景  
const scene = new THREE.Scene();  

// 2. 创建相机（透视相机）  
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
camera.position.z = 5;  

// 3. 创建渲染器  
const renderer = new THREE.WebGLRenderer();  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);  

// 4. 创建立方体  
const geometry = new THREE.BoxGeometry();  
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);  

// 5. 渲染循环（动画）  
function animate() {  
    requestAnimationFrame(animate);  
    cube.rotation.x += 0.01;  
    cube.rotation.y += 0.01;  
    renderer.render(scene, camera);  
}  
animate();  
</syntaxhighlight>  

'''输出'''：一个绿色的立方体在屏幕上旋转。  

== 核心概念详解 ==  

=== 场景（Scene） ===  
场景是所有 3D 对象的根容器。可以通过 `THREE.Scene()` 创建，并使用 `scene.add()` 添加对象。  

=== 相机（Camera） ===  
Three.js 支持多种相机类型，最常用的是透视相机（`PerspectiveCamera`），其参数包括：  
* **fov**（视野角度）  
* **aspect**（宽高比）  
* **near**（近裁剪面）  
* **far**（远裁剪面）  

数学公式：  
<math>  
\text{aspect} = \frac{\text{width}}{\text{height}}  
</math>  

=== 几何体与材质 ===  
Three.js 提供了多种内置几何体（如 `BoxGeometry`、`SphereGeometry`）和材质（如 `MeshBasicMaterial`、`MeshPhongMaterial`）。  

=== 光源（Light） ===  
光源类型包括：  
* `THREE.AmbientLight`（环境光）  
* `THREE.DirectionalLight`（平行光）  
* `THREE.PointLight`（点光源）  

== 实际案例：3D 地球模型 ==  
以下代码展示如何创建一个简单的 3D 地球模型：  

<syntaxhighlight lang="javascript">  
// 创建地球几何体（球体）  
const geometry = new THREE.SphereGeometry(1, 32, 32);  

// 加载纹理贴图  
const textureLoader = new THREE.TextureLoader();  
const texture = textureLoader.load('earth_texture.jpg');  

// 创建材质  
const material = new THREE.MeshPhongMaterial({ map: texture });  

// 创建地球网格  
const earth = new THREE.Mesh(geometry, material);  
scene.add(earth);  

// 添加光源  
const light = new THREE.DirectionalLight(0xffffff, 1);  
light.position.set(1, 1, 1);  
scene.add(light);  
</syntaxhighlight>  

== 总结 ==  
Three.js 是一个强大的工具，适用于游戏开发、数据可视化、虚拟现实等领域。通过本章的学习，你应该掌握了 Three.js 的基本概念和核心功能。下一步可以探索更高级的主题，如：  
* 加载 3D 模型（如 GLTF 格式）  
* 使用着色器（Shaders）自定义渲染  
* 实现物理引擎（如 Cannon.js）  

<mermaid>  
graph LR  
    A[Three.js 基础] --> B[场景与相机]  
    A --> C[几何体与材质]  
    A --> D[光源与动画]  
    B --> E[PerspectiveCamera]  
    C --> F[BoxGeometry]  
    D --> G[requestAnimationFrame]  
</mermaid>

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript数据可视化]]