2.把地板变成红色

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

<script setup lang="ts">
import * as BABYLON from "babylonjs";
import type { Engine, Scene } from "babylonjs";
import { ref, onMounted } from "vue";
import { diffusionProfile } from "babylonjs/Shaders/ShadersInclude/diffusionProfile";

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 UniversalCamera)，因为它增加了更多的功能，如手柄。
   * new FreeCamera(name: string, position: Vector3, scene?: Scene, setActiveOnSceneIfNoneActive?: boolean): FreeCamera
   * name: 在场景中定义摄像机的名称
   * position: 定义摄像机在场景中的起始位置
   * scene: 定义相机所属的场景
   * setActiveOnSceneIfNoneActive: 定义如果未定义其他活动相机，则是否应将该相机标记为活动的
   */
  const camera = new BABYLON.FreeCamera(
    "camera1",
    new BABYLON.Vector3(0, 5, -10),
    scene
  );

  /**
   * Vector3.Zero
   * 返回一个新的Vector3，设为(0.0,0.0,0.0)
   */
  camera.setTarget(BABYLON.Vector3.Zero());

  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;

  // 创建球
  /**
   * MeshBuilder 创建物体，CreateSphere中的sphere是可以替换成其他的
   * sphere是球体
   * CreateSphere(name: string, options?: { arc?: number; backUVs?: Vector4; diameter?: number; diameterX?: number; diameterY?: number; diameterZ?: number; frontUVs?: Vector4; segments?: number; sideOrientation?: number; slice?: number; updatable?: boolean }, scene?: Nullable<Scene>): Mesh
   * CreateShape(name, options, scene);
   * name: 表示这个物体的名称;
   * options: 选项；https://doc.cnbabylon.com/4-0-discover-basic-elements/
   * scene: 表示你加入的场景
   */
  // const sphere = BABYLON.MeshBuilder.CreateSphere(
  //   "sphere",
  //   {
  //     diameter: 2,
  //     segments: 32,
  //   },
  //   scene
  // );

  /**
   * sphere.position => Vector
   * 获取或设置y坐标
    返回数
    获取或设置y坐标
   */
  // sphere.position.y = 1;

  // 创建地面
  /**
   * Ground: 地面
  CreateGround(name: string, options?: { height?: number; subdivisions?: number; subdivisionsX?: number; subdivisionsY?: number; updatable?: boolean; width?: number }, scene?: Scene): GroundMesh
   *
   * 参数width和height(浮动，默认值1)设置了地面的宽度和高度大小
    参数subpartitions(正整数)设置每条边的细分数量
    网格可以设置为可更新的布尔参数updatable(默认为false)，如果它的内部几何形状应该在创建后改变
   *name: 定义网格的名称
    options: https://doc.babylonjs.com/typedoc/modules/BABYLON#CreateGround-2
    scene: Scene
   */
  const ground = BABYLON.MeshBuilder.CreateGround(
    "ground",
    {
      width: 6,
      height: 6,
    },
    scene
  );

  /**
   * 实例化一个新的标准材质。
    这是在巴比伦使用的默认材料。这是质量之间最好的权衡和表演。
   * new StandardMaterial(name: string, scene?: Scene): StandardMaterial
   * name: 名字
   * scene: 定义素材所属的场景
   */
  const groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);

  ground.material = groundMaterial;
  ground.material.diffuseColor = BABYLON.Color3.Red(); // 让地面背景变色
  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>