8.添加声音

<template>
  <div class="badylon-canvas2">
    <canvas ref="renderCanvas2" id="render-canvas2"></canvas>
  </div>
</template>

<script setup lang="ts">
import * as BABYLON from "babylonjs";
import "babylonjs-loaders";
import Assets from "../../utils/babylon/babylon-asset.js";
import type { Engine, Scene } from "babylonjs";
import { ref, onMounted } from "vue";

type EngineType = Engine | null;
type SceneType = Scene | null;

const renderCanvas2 = ref<HTMLCanvasElement | null>(null);
let engine: EngineType = null;
let scene: SceneType = null;
let sceneToRender: SceneType = null;

// 渲染循环
function startRenderLoop(engine: Engine) {
  /**
   * runRenderLoop(renderFunction: (() => void)): void
   * 注册并执行一个渲染循环。引擎可以有多个渲染函数
   * renderFunction: (() => void) --- 定义要持续执行的函数(不停的执行)
   */
  engine.runRenderLoop(() => {
    console.log("runRenderLoop...");
    // 如果没有runRenderLoop函数，就无法在移动图像时更新“相机”的数据，简单来说就是图像不会动了。
    if (sceneToRender && sceneToRender.activeCamera) {
      /**
       * render(updateCameras?: boolean, ignoreAnimations?: boolean): void
       * updateCameras： 定义一个布尔值，指示摄像机是否必须根据其输入进行更新(默认为true)
       *  ignoreAnimations: 定义一个布尔值，指示动画是否不应该执行(默认为false)
       */
      sceneToRender.render(); // 如果没有这个不会出现图像；渲染scene
      // sceneToRender.debugLayer.show(); // 用来调试babylon的
    }
  });
}

// 创建场景
function createScene() {
  if (engine === null) return null;

  /**
   * new Scene(engine: Engine, options?: SceneOptions): Scene
   * 表示要由引擎渲染的场景。
   * engine: Engine --- 定义用于渲染此场景的引擎
   * options: 可选； https://doc.babylonjs.com/typedoc/interfaces/BABYLON.SceneOptions
   *
   */
  const scene = new BABYLON.Scene(engine);

  /**
   * new ArcRotateCamera(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene?: Scene, setActiveOnSceneIfNoneActive?: boolean): ArcRotateCamera
   *   在给定的场景中实例化一个新的ArcRotateCamera
   * name: 名字
   * alpha: 定义相机沿纵向轴的旋转---一开始显示的角度
   * beta: 定义相机沿纬度轴的旋转---一开始显示的角度
   * radius: 定义相机与目标的距离
   * target: Vector3 // 控制相机的视角
   * setActiveOnSceneIfNoneActive: 定义如果未定义其他活动相机，则是否应将该相机标记为活动的
   *
   * new Tools(): Tools
   *  ToRadians(angle: number): number
   *    将角度的角度转换为弧度
   */
  const camera = new BABYLON.ArcRotateCamera(
    "camera",
    -Math.PI / 2,
    Math.PI / 2.5,
    15,
    new BABYLON.Vector3(0, 0, 0),
    scene
  );
  // https://doc.babylonjs.com/typedoc/classes/BABYLON.ArcRotateCamera#constructor
  camera.attachControl(renderCanvas2.value, true);

  /**
   * new HemisphericLight(name: string, direction: Vector3, scene: Scene): HemisphericLight
   * 根据传递的方向(Vector3)在场景中创建一个半球光对象。
    半球光模拟周围环境光，所以通过的方向是光的反射方向，而不是入射方向。
    半球光不能投射阴影。
   */

  /**
   * name: 灯光的名字
   * direction: 光反射的方向
   * scene: 灯光所属的场景
   */
  const light = new BABYLON.HemisphericLight(
    "light",
    /**
     * new Vector3(x?: number, y?: number, z?: number): Vector3
     * 从给定的x, y, z (float)坐标创建一个新的Vector3对象。三维向量
     * x: number; 定义第一个坐标(在X轴上)
     * y: number
     * z: number
     */
    new BABYLON.Vector3(1, 1, 0),
    scene
  );

  /**
   * 添加声音
   * new Sound(name: string, urlOrArrayBuffer: any, scene?: Nullable<Scene>, readyToPlayCallback?: Nullable<(() => void)>, options?: ISoundOptions): Sound
   *  urlOrArrayBuffer: Url到声音加载异步或ArrayBuffer，它也与MediaStreams和AudioBuffers一起工作
   *  readyToPlayCallback: 如果你想在声音准备好播放后加载你的代码，提供一个回调函数
   */
  // const music = new BABYLON.Sound(
  //   "cello",
  //   "sounds/cellolong.wav",
  //   scene,
  //   null,
  //   { loop: true, autoplay: true }
  // );

  // 3秒一次
  const bounce = new BABYLON.Sound("bounce", "sounds/bounce.wav", scene);
  setInterval(() => bounce.play(), 3000);

  /**
   * new SceneLoader(): SceneLoader
   * ImportMeshAsync(meshNames: any, rootUrl: string, sceneFilename?: string | File, scene?: Nullable<Scene>, onProgress?: Nullable<((event: ISceneLoaderProgressEvent) => void)>, pluginExtension?: Nullable<string>): Promise<ISceneLoaderAsyncResult>
   * meshNames: 网格名称的数组，单个网格名称，或用于过滤导入网格的所有网格的空字符串， string | Array
   * rootUrl: 一个字符串，它定义了场景和资源的根url或rootURL和filename的连接
   * sceneFilename: 定义场景文件名的字符串或以"data "开头的字符串:后面是场景的字符串版本或file对象(默认:空字符串)
   * scene: 巴比伦的例子。附加到的场景
   * onProgress: 一个回调函数，为正在加载的每个文件提供一个进度事件
   * pluginExtension: 扩展用于确定插件
   */
  // 无法解析.fbx文件

  // 只加载一个
  // BABYLON.SceneLoader.ImportMeshAsync(
  //   "semi_house",
  //   "https://assets.babylonjs.com/meshes/",
  //   "both_houses_scene.babylon"
  // );

  // 一次性加载多个模型
  // BABYLON.SceneLoader.ImportMeshAsync(
  //   ["ground", "semi_house"],
  //   "https://assets.babylonjs.com/meshes/",
  //   "both_houses_scene.babylon"
  // );

  // 加载后修改模型
  BABYLON.SceneLoader.ImportMeshAsync(
    "",
    "https://assets.babylonjs.com/meshes/",
    "both_houses_scene.babylon"
  ).then((result) => {
    const house1 = scene.getMeshByName("detached_house");
    house1 && (house1.position.y = 2);
    const house2 = result.meshes[2];
    house2.position.y = 1;
  });

  return scene;
}

function createDefaultEngine() {
  /**
   * new Engine(canvas, antialias, options, adaptToDeviceRatio) 创建一个引擎
   * canvas: 现实容器，可以是Canvas标签...
   * antialias: boolean, 默认是false,启动后可以防止图像出现“锯齿”
   * optiosn: 选项,
   *    adaptToDeviceRatio: false, // 定义是否适应设备的视口特征
        audioEngine: false, // 定义是否也应该初始化webaudio
        audioEngineOptions: {}, // 指定音频引擎的选项
        autoEnableWebVR: false, // 定义是否应该自动启用webvr
        deterministicLockstep: false, // 定义动画是否应该使用确定性锁定步骤运行
   *    adaptoToDeviceRatio: boolean，默认false;定义是否适应视口
        ....
        https://doc.babylonjs.com/typedoc/interfaces/BABYLON.EngineOptions
   */
  return new BABYLON.Engine(renderCanvas2.value, true, {});
}

async function initFunction() {
  async function asyncEngineCreation() {
    try {
      return createDefaultEngine(); // 先创建容器
    } catch (e) {
      console.log(
        "the available createEngine function failed. Creating the default engine instead"
      );

      return createDefaultEngine();
    }
  }

  engine = await asyncEngineCreation(); // 先创建容器
  if (!engine) throw "engine should not be null.";
  startRenderLoop(engine); // 如果没有这个不会出现图像
  scene = createScene(); // 再创建渲染场景
  // 创建容器 ---> 再创建渲染场景放进容器 ---> 再创建"相机","灯光"，"球体"，"地面"放进场景
  scene && scene.render();
}

onMounted(() => {
  if (renderCanvas2.value) {
    console.log("ttttt");
    initFunction().then(() => {
      sceneToRender = scene;
    });

    // Resize
    window.addEventListener("resize", function () {
      engine && engine.resize();
    });
  }
});
</script>

<style lang="scss" scoped>
.badylon-canvas2 {
  width: 100%;
  height: 100%;

  #render-canvas2 {
    width: 100%;
    height: 100%;
    // touch-action 用在触摸屏，缩放
    touch-action: none;
  }
}
</style>