Babylon.js 第二章：以更具互动性的方式编写您的第一个 3D Web 应用

在第一篇文章中，我们探索了 Babylon.js 的基础知识，并创建了一个简单的 3D 场景。现在，让我们更进一步，让这个场景更具互动性。我们将学习如何使用 JavaScript 来控制摄像机，以便用户可以四处移动并探索场景。

首先，我们需要创建一个场景（Scene）来包含我们的世界。场景是包含所有其他对象（如网格、灯光和摄像机）的容器。要创建一个场景，我们可以使用以下代码：

var scene = new BABYLON.Scene(engine);

接下来，我们需要创建一个摄像机（Camera）来查看场景。摄像机定义了用户将从哪个角度看到场景。在 Babylon.js 中，有许多不同类型的摄像机，每种摄像机都有自己的用途。对于本教程，我们将使用一个通用摄像机（UniversalCamera），它允许用户自由移动和旋转。要创建一个通用摄像机，我们可以使用以下代码：

var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 0, 10), scene);

现在，我们需要创建一个灯（Light）来照亮场景。灯光是照亮场景并使对象可见的必要元素。在 Babylon.js 中，有许多不同类型的灯光，每种灯光都有自己的用途。对于本教程，我们将使用一个点光源（PointLight），它可以从一个点向各个方向发出光。要创建一个点光源，我们可以使用以下代码：

var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(0, 10, 0), scene);

最后，我们需要添加一些对象到场景中。对于本教程，我们将添加一个球体（Sphere）。要创建一个球体，我们可以使用以下代码：

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", {diameter: 2}, scene);

现在，我们已经创建了一个包含场景、摄像机、灯光和对象的场景。要渲染场景，我们可以使用以下代码：

engine.runRenderLoop(function () {
  scene.render();
});

当您运行此代码时，您应该会看到一个包含一个球体的 3D 场景。您可以使用鼠标和键盘来控制摄像机，从而四处移动并探索场景。

现在，让我们使这个场景更具互动性。我们可以使用 JavaScript 来控制摄像机，以便用户可以四处移动并探索场景。要控制摄像机，我们可以使用以下代码：

document.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    case 37: // left arrow key
      camera.position.x -= 0.1;
      break;
    case 38: // up arrow key
      camera.position.y += 0.1;
      break;
    case 39: // right arrow key
      camera.position.x += 0.1;
      break;
    case 40: // down arrow key
      camera.position.y -= 0.1;
      break;
  }
});

当您运行此代码时，您应该会发现您可以使用箭头键来控制摄像机。您可以四处移动并探索场景。

我们还可以使用 JavaScript 来控制灯光。例如，我们可以更改灯光颜色或亮度。要更改灯光颜色，我们可以使用以下代码：

light.diffuseColor = new BABYLON.Color3(1, 0, 0);

要更改灯光亮度，我们可以使用以下代码：

light.intensity = 2;

我们还可以使用 JavaScript 来控制对象。例如，我们可以更改对象的位置或旋转。要更改对象的位置，我们可以使用以下代码：

sphere.position.x += 0.1;

要更改对象