Three.js简化 WebGL 的使用

Three.js 是一个流行的 JavaScript 库，旨在简化 WebGL 的使用，使开发者能够轻松创建和渲染 3D 图形。它提供了丰富的功能和工具，适合游戏开发、数据可视化和互动应用等。

https://threejs.org/docs/index.html#manual/zh/introduction/Installation

Three.js 的基本使用步骤：

引入 Three.js：

可以通过 CDN 引入或在项目中安装：

html 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

创建场景：

创建一个场景、相机和渲染器：

javascript 复制代码

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

添加物体：

创建几何体和材质，并将其添加到场景中：

javascript 复制代码

const geometry = new THREE.BoxGeometry();  // 创建一个立方体几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  // 创建一个绿色材质
const cube = new THREE.Mesh(geometry, material);  // 创建一个立方体网格
scene.add(cube);  // 将立方体添加到场景中

设置相机位置：
- 调整相机位置，以便可以看到物体：
javascript 复制代码
```
camera.position.z = 5;  // 将相机放置在 z 轴 5 的位置
```

创建渲染循环：

创建一个动画循环来更新场景并重新渲染：

javascript 复制代码

function animate() {
    requestAnimationFrame(animate);  // 递归调用以创建动画循环
    cube.rotation.x += 0.01;  // 旋转立方体
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);  // 渲染场景
}
animate();  // 启动动画

完整示例：

下面是一个简单的完整示例，展示了如何使用 Three.js 创建并渲染一个旋转的立方体：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Example</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        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: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

Three.js 的其他功能：

光照和阴影：Three.js 支持多种光源和阴影效果，可以实现更真实的渲染。
材质：提供了多种材质选项，如 MeshPhongMaterial、MeshStandardMaterial 等，适用于不同的视觉效果。
加载模型：支持多种模型格式的加载，如 GLTF、OBJ、FBX 等，可以直接将 3D 模型导入到场景中。
粒子系统：可以轻松创建粒子效果，如烟雾、火焰等。
动画：Three.js 提供了强大的动画系统，可以对物体进行复杂的动画处理。

通过这些功能，Three.js 使得开发者能够快速构建出丰富的 3D 应用，无需深入了解 WebGL 的底层细节。