Babylonjs 第二章第一个 3D Web应用

由于个人在技术栈偏向于 Vue，Babylonjs 的学习均基于 Vue3 + Vite。

概念

无论是创建整个世界还是只是将一个模型放入网页中，都需要一个场景（Scene）来包含世界或模型，一个摄像机(Cameras)来查看它，一盏灯(Lights)来照亮它，当然，至少还需要一个可查看的对象作为模型。所有模型，无论是一个简单的盒子还是复杂的人物角色，都是由三角形或四边形的网格（Mesh）组成的。

场景 Scene

场景可以看作一个用来放置所有网格的舞台，可以放置灯光和拍摄的摄像机。场景可以根据诉求设置一个或者多个。有点像通过手机摄像机看世界，支持点击、触摸等操作

相机 Cameras

相机 Cameras 定义从什么角度看舞台上的模型，如远近、角度等。支持键盘、鼠标、触摸或游戏手柄控制角度，如使用键盘控制前进、后退等。

可以体验下 BabylonJS制作的云展 cool360(新媒体世界))

最常用的是用于"第一人称"运动的通用相机，轨道相机ArcRotateCamera和用于现代虚拟现实体验的WebXRCamera。

灯 Lights

灯 Lights 用于给照亮模型，如果没有灯光 Lights，和现实世界一样，模型渲染为黑色。可以让我们看到网格并影响亮度和颜色。可以产生阴影、反射等效果。多个灯光可以重叠，支持颜色叠加，如红色、绿色和蓝色的重叠相互作用，产生白光。

有四种类型的光源：

点光 - 想想灯泡。
定向光 - 想想被遥远的太阳照亮的行星。
聚光灯 - 想想聚焦的光束。
半球光 - 想想环境光。

网格 Mesh

在3D虚拟世界中，形状是由网格构建的，有多个三角形刻面连接在一起。每个刻面由三个顶点组成。

Hello World

官方有基于各框架的教程示例，我们以 Vue3 为例。

创建项目

按照 Home | Vite 官方中文文档 (vitejs.dev) 创建后，引入 babylonjs 依赖

pnpm add @babylonjs/core
复制代码

Vue 组件

创建一个 Vue 组件，用于显示 BabylonJS 场景。

<!-- BabylonScene.vue -->
<template>
  <canvas ref="bjsCanvas" width="800" height="800" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import createScene from "../scenes/MyFirstScene";

const bjsCanvas = ref(null);

onMounted(() => {
  if (bjsCanvas.value) {
    createScene(bjsCanvas.value);
  }
});
</script>
复制代码

import { Engine, Scene, FreeCamera, Vector3, MeshBuilder, StandardMaterial, Color3, HemisphericLight } from "@babylonjs/core";

/**
 * 需要一个场景（Scene）来包含该世界或模型，一台用于查看该世界或模型的摄像头（Camera），一个照明它的照明灯（Light），
 * 以及至少一个可视对象作为一个对象。
 * 所有模型，无论是一个简单的盒子还是复杂的人物角色，都是由三角形或四边形的网格（Mesh）组成的。
 * 网格（Mesh）是物体的基本组成单位。
 * @param {*} canvas canvas对象
 */
const createScene = (canvas) => {
  //  创建 babylonjs 3D 引擎
  const engine = new Engine(canvas);
  // 初始化一个场景
  const scene = new Scene(engine);

  // 自由类型的相机
  const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
  camera.setTarget(Vector3.Zero());
  camera.attachControl(canvas, true);

  new HemisphericLight("light", Vector3.Up(), scene);

  const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
  const material = new StandardMaterial("box-material", scene);
  material.diffuseColor = Color3.Blue();
  box.material = material;

  engine.runRenderLoop(() => {
    scene.render();
  });
};

export default createScene;
复制代码

调整 App.vue 的内容，直接渲染 BabylonScene.vue 即可，效果如下：

捕获.PNG