Three.js 是一个流行的开源 JavaScript 库，旨在通过 WebGL 在网页上创建和渲染 3D 图形。它抽象了 WebGL 的复杂性，提供了一个简单的 API，使开发者能够更容易地创建互动式 3D 内容。以下是 Three.js 的一些关键特点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Demo with Mouse Interaction</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #2c3e50;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script type="module">
import * as THREE from "../libs/three.module.js";
import { OrbitControls } from "../libs/OrbitControls.js"; // 引入 OrbitControls
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
75, // 视角
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近端裁剪
1000 // 远端裁剪
);
camera.position.z = 5; // 确保相机离立方体远一些
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x56585d });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 添加光源
const ambientLight = new THREE.AmbientLight(0x404040, 1); // 环境光
scene.add(ambientLight);
// 添加 OrbitControls（鼠标交互控制）
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用惯性
controls.dampingFactor = 0.25; // 阻尼因子
controls.screenSpacePanning = false; // 禁止屏幕平移
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 渲染场景和相机
renderer.render(scene, camera);
// 更新控制器
controls.update();
}
animate();
// 监听窗口大小变化，调整渲染器和相机
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
1. 简化的 3D 图形渲染
- Three.js 通过简化 WebGL 提供的 API，让开发者能够轻松地在网页中创建 3D 场景。你不需要深入了解 WebGL 的底层实现，只需要使用 Three.js 提供的高级抽象来创建物体、光照和相机。
2. 强大的功能
- 几何体：Three.js 支持多种 3D 几何体，包括立方体、球体、圆环、平面等。
- 材质：你可以使用多种材质来为物体赋予不同的外观，如基础材质、Phong 材质、Lambert 材质、标准材质等，支持纹理映射和透明度控制。
- 光源和阴影：支持各种光源类型（如点光源、方向光、环境光等），并且能够实现复杂的阴影效果。
- 相机：Three.js 提供了多种类型的相机（如透视相机和正交相机），以及丰富的相机控制功能，可以轻松设置视角。
- 动画：内置的动画系统可以用来控制物体的运动、旋转、缩放等属性。
- 后期处理效果：支持后期效果，如模糊、光晕、粒子效果等，可以用来增强渲染效果。
- 加载模型：通过加载外部模型（如
.obj、.glb等格式），可以轻松实现复杂的 3D 场景。
3. 跨平台支持
- Three.js 使用 WebGL，这意味着它可以运行在现代浏览器中，无需额外安装插件，支持桌面和移动设备。
4. 丰富的社区和文档
- Three.js 拥有庞大的开发者社区，提供了大量的示例和教程。官方文档详尽，涵盖了从基础到高级的各类使用场景。
5. 实时渲染
- Three.js 支持实时渲染，适用于游戏、数据可视化、虚拟现实（VR）、增强现实（AR）、科学可视化等应用场景。
6. 与其他库的兼容性
- Three.js 可以与其他 JavaScript 库和框架（如 React、Vue 等）无缝集成，还可以与 WebXR API 配合使用，支持 VR 和 AR 应用。
7. 适用场景
- 游戏开发：创建浏览器中运行的 3D 游戏。
- 虚拟现实（VR）：构建 VR 场景，让用户在虚拟空间中进行互动。
- 增强现实（AR）：结合现实世界数据进行增强现实显示。
- 数据可视化：通过 3D 图形展示复杂数据，提供更直观的分析。
- 艺术创作：创作和展示数字艺术作品。
总之，Three.js 是一个功能强大且易于上手的库，适用于任何想要在 Web 上进行 3D 创作的开发者。如果你有更深入的需求或想了解更多高级功能，随时可以进一步探索 Three.js 的官方文档和社区资源。
