在Vue3中使用BabylonJs开发 3D的初体验

在Vue3中使用BabylonJs开发 3D的初体验

BabylonJs是一个基于WebGL的3D游戏引擎，其强大的性能和灵活的API接口使其成为了前端3D开发的首选之一。本文将介绍如何在Vue3项目中使用BabylonJs进行3D开发，希望对读者有所启发。

步骤1：安装BabylonJs

在Vue项目中使用BabylonJs需要先安装相应的依赖，可以通过npm 安装：

npm install babylonjs

步骤2：创建BabylonJs场景

创建一个BabylonJs场景，也就是创建一个canvas元素，并在此元素中创建一个BabylonJs场景实例。

<template>
  <div>
    <canvas ref="renderCanvas"></canvas>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';

export default {
  mounted() {
    const canvas = this.$refs.renderCanvas;
    const engine = new BABYLON.Engine(canvas, true);

    const scene = new BABYLON.Scene(engine);
    ...
  }
}
</script>

以上代码中，我们引入了BabylonJs库，并在mounted钩子函数中创建了一个engine实例和一个BABYLON.Scene实例，其中engine实例用于将场景渲染在canvas元素中，BABYLON.Scene实例则表示一个场景对象。

步骤3：创建相机

相机用于定位场景视角，使得场景能够呈现给用户。在BabylonJs中，通常会使用ArcRotateCamera相机类型。

const camera = new BABYLON.ArcRotateCamera(
  'Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene
);
camera.attachControl(canvas, true);

以上代码中，我们创建了一个ArcRotateCamera相机，可以通过替换第2至第5个参数来调整相机位置和旋转角度，通过attachControl方法将相机控制器绑定到canvas元素上。

步骤4：创建光源

光源用于照亮场景，使得3D物体能够被看到。在BabylonJs中，通常会使用HemisphericLight类型的光源。

const light = new BABYLON.HemisphericLight(
  'light1', new BABYLON.Vector3(1, 1, 0), scene
);

以上代码中，我们创建了一个HemisphericLight类型的光源，并通过Vector3对象设置了光源的方向。

步骤5：创建场景物体

最后一步是创建场景中的3D物体。在BabylonJs中，实现方式有很多种，本文仅介绍最简单的BoxMesh模型。

const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);

以上代码中，我们创建了一个名为“box”的BoxMesh模型，并设置了其大小为1。

至此，初步的场景就创建完成了，完整的代码如下：

<template>
  <div>
    <canvas ref="renderCanvas"></canvas>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';

export default {
  mounted() {
    const canvas = this.$refs.renderCanvas;
    const engine = new BABYLON.Engine(canvas, true);
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera(
      'Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene
    );
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight(
      'light1', new BABYLON.Vector3(1, 1, 0), scene
    );
    const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);
    engine.runRenderLoop(() => {
      scene.render();
    });
  }
}
</script>

示例1：3D立方体的旋转

在上文的基础上，可以实现简单的3D动画，例如3D立方体的旋转。如下代码所示：

const box = BABYLON.MeshBuilder.CreateBox('box', { size: 1 }, scene);
engine.runRenderLoop(() => {
  box.rotation.y += 0.01;
  scene.render();
});

以上代码中，我们在engine的runRenderLoop方法中增加了一个回调函数，每次执行时将box模型沿y轴旋转0.01弧度。

示例2：3D地球的球体贴图

在上文的基础上，可以将贴图应用到3D物体上，例如在球体上贴出地球贴图。如下代码所示：

const earth = BABYLON.MeshBuilder.CreateSphere('earth', { diameter: 1 }, scene);
const earthTexture = new BABYLON.Texture('earth.jpg', scene);
const earthMaterial = new BABYLON.StandardMaterial('earthMat', scene);
earthMaterial.diffuseTexture = earthTexture;
earth.material = earthMaterial;

以上代码中，我们创建了一个名为“earth”的球体模型，并在其中嵌入了“earth.jpg”图片纹理。

附：示例2的完整代码

<template>
  <div>
    <canvas ref="renderCanvas"></canvas>
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs';

export default {
  mounted() {
    const canvas = this.$refs.renderCanvas;
    const engine = new BABYLON.Engine(canvas, true);
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.ArcRotateCamera(
      'Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene
    );
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight(
      'light1', new BABYLON.Vector3(1, 1, 0), scene
    );
    const earth = BABYLON.MeshBuilder.CreateSphere(
      'earth', { diameter: 1 }, scene
    );
    const earthTexture = new BABYLON.Texture('earth.jpg', scene);
    const earthMaterial = new BABYLON.StandardMaterial('earthMat', scene);
    earthMaterial.diffuseTexture = earthTexture;
    earth.material = earthMaterial;
    engine.runRenderLoop(() => {
      earth.rotation.y += 0.01;
      scene.render();
    });
  }
}
</script>