场景、相机、渲染器

通过这篇文章，会介绍场景，相机和渲染器的基本概念，以及如何创建一个简单的 3D 场景。

场景

场景是所有 3D 对象的容器。这是所有 3D 元素的容器，包括网格、光源、相机和其他对象。场景是一个对象，它包含所有 3D 对象，以及所有 3D 对象的位置、旋转和缩放。

简单可以理解成现实的一个场景，我们所有的物体都是在这个场景中的。比如我一个屋子里面有桌子、椅子、电视等等，这个屋子就是一个场景，桌子、椅子、电视等等就是这个场景中的物体。

我们通过下面的代码创建一个场景：

var scene = new THREE.Scene();

然后，我们在场景中添加一个立方体：

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

我有场景了，也有了物体，但是我们现在看不到这个物体，因为我们还没有相机。这里的相机可以理解成我们的眼睛，我们需要一个相机来看到这个场景。

所以，我们需要创建相机

var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

上面的代码表示，我们创建了一个透视相机，透视相机是一种透视投影相机，它会使远处的物体看起来比较小，近处的物体看起来比较大。这个相机有四个参数，分别是视野、宽高比、近裁剪面和远裁剪面。其几个参数分别为：

视野：视野是指我们能看到的场景的大小，单位是度。视野越大，我们能看到的场景就越大。
宽高比：宽高比是指我们的屏幕的宽度和高度的比例。我们通常使用窗口的宽度和高度来计算宽高比。
近裁剪面：近裁剪面是指相机能看到的最近的物体的距离。如果物体离相机太近，我们就看不到这个物体了。
远裁剪面：远裁剪面是指相机能看到的最远的物体的距离。如果物体离相机太远，我们也看不到这个物体。

有场景和相机了，我们还需要将这两个渲染到屏幕上，这时候我们需要渲染器。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

上面的代码表示，我们创建了一个 WebGL 渲染器，然后设置了渲染器的大小，最后将渲染器的 DOM 元素添加到页面中。

现在，我们还需要设置相机的位置，相当于我们的眼睛在哪里看这个场景。

camera.position.z = 5;

最后，我们需要渲染器渲染这个场景。

renderer.render(scene, camera);

到此为止，我们已经创建了一个简单的 3D 场景。

目前，这个场景是静态的，我们可以通过循环来让这个场景动起来。我们可以通过下面的代码来让这个立方体旋转。

function animate() {
  requestAnimationFrame(animate);

  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

requestAnimationFrame 表示浏览器会在下一次重绘之前调用指定的回调函数来更新动画。这样就可以让我们的立方体旋转起来。如果不太理解，可以简单认为就是一个循环，每次循环都会让立方体旋转一点点。在上面的代码中，我们每次循环都让立方体绕着 x 和 y 轴旋转 0.01 弧度。旋转后，在通过渲染器渲染这个变化后的场景。

下面是完整的代码：

<!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;
      }

      canvas {
        display: block;
      }
    </style>
  </head>

  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.155.0/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three';
      // 创建场景
      const scene = new THREE.Scene();

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

      // 创建相机
      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);

      renderer.render(scene, camera);
    </script>
  </body>
</html>

场景、相机、渲染器

场景​

场景