6. 盒子模型

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

// 创建场景
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,
    3,
    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(0, 1, 0),
    scene
  );

  /**
   * 光的强度。
    注意:默认情况下它是在框架自己的单元中定义的。
    注:在PBR材料中，intensityMode可用于选择强度的定义单位。
   */
  light.intensity = 0.7;

  const box = BABYLON.MeshBuilder.CreateBox("box", {});

  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>