Three.js简化 WebGL 的使用

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

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

Three.js 的基本使用步骤：

引入 Three.js：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></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;  // 将相机放置在 z 轴 5 的位置

创建渲染循环：

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

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

完整示例：

下面是一个简单的完整示例，展示了如何使用 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 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>