携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
1. 目的
本站的主要目的是简单的介绍一下 three.js，然后简单的建立一个拥有旋转立方体的场景。
2. 前期准备
在我们使用 three.js 之前，我们需要下载它。three.js 下载路径如下：
下载完成后，将其引入到我们的项目中(注意three.js文件的目录路径)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第一站：创建场景</title>
</head>
<body>
<script src="../three.js"></script>
<script>
// TODO 逻辑代码
</script>
</body>
</html>
<style>
body {
margin: 0;
}
</style>
3. 创建场景
为了让 three.js 展现物品，我们需要三个重要的组成部分：场景、相机以及渲染器，这样我们就能保证透过相机渲染出场景。
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);
在代码中我们创建了三个重要组成部分：场景、相机以及渲染器。
对于相机，three.js 中有各种不同的类型，这里先使用 PerspectiveCamera 相机。其第一个参数是视野角度，即你能在显示器上看到的场景范围，单位是角度；第二个参数是长宽比，接下来的参数分别是近截面和远截面，当物体某些部分比相机的远截面远或者比近截面近的时候，这些部分都将不会渲染到场景中。
对于渲染器，three.js 中也有多样的类型，这里先使用 WebnGLRenderer 渲染器。在创建了渲染器之后，需要为其设置尺寸，在这里我们将其设为整个浏览器屏幕的宽、高。这里需要注意的是：如果在一些性能比较敏感的场景下，需要严格控制渲染器的尺寸。
4. 创建立方体
接下来，我们将要展示的立方体创建出来。
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
几何体：要创建一个立方体，我们需要一个 BoxGemomety（几何体）对象，这个对象包含了一个立方体中所有的顶点和面。
材质：接下来需要给这个立方体一个材质，使其能够拥有一定的颜色，在 three.js 中自带了几种材质，在这里我们使用 MeshBasicMaterial，颜色设置为 0x00ff00。
网格：最后，我们需要一个网格包含几何体以及作用在几何体上的材质，并将网格对象放入到我们的场景中。
5. 渲染场景
紧接着，将写好的立方体渲染到场景中。为此，我们需要使用一个被叫做“渲染循环”或者“动画循环”的东西。
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
6. 动起来
这个时候，我们已经可以在浏览器中看到一个立方体了。最后，我们就让这个立方体动起来。分别绕 x 和 y 轴旋转，速度为 0.01（2π 为一圈）。
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
