11. 建设村庄(旋转，移动，缩放砖头)

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

<script setup lang="ts">
import * as BABYLON from "@babylonjs/core/Legacy/legacy";
import "@babylonjs/loaders/OBJ";
import "@babylonjs/loaders/glTF";
import Assets from "../../utils/babylon/babylon-asset.js";
import type { Engine, Scene } from "@babylonjs/core/Legacy/legacy";
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) {
  engine.runRenderLoop(() => {
    if (sceneToRender && sceneToRender.activeCamera) {
      sceneToRender.render();
    }
  });
}

function createDefaultEngine() {
  return new BABYLON.Engine(renderCanvas2.value, true, {
    // 这些选项在api完全搜索不到
    preserveDrawingBuffer: true,
    stencil: true,
    disableWebGL2Support: false,
  });
}

function createScene() {
  if (engine === null) return null;
  scene = new BABYLON.Scene(engine);

  const camera = new BABYLON.ArcRotateCamera(
    "camera",
    -Math.PI / 2,
    Math.PI / 2.5,
    10,
    new BABYLON.Vector3(0, 0, 0)
  );
  camera.attachControl(renderCanvas2.value, true);

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

  // 深入了解盒子三维的设定：https://doc.babylonjs.com/features/featuresDeepDive/mesh/transforms/center_origin/position
  // 设置x,y,z的三种方式
  // 第一种
  // const box = BABYLON.MeshBuilder.CreateBox("box", {
  //   width: 2,
  //   height: 1.5,
  //   depth: 3,
  // });

  // 第二种
  // const box = BABYLON.MeshBuilder.CreateBox("box", {});
  // box.scaling.x = 2;
  // box.scaling.y = 1.5;
  // box.scaling.z = 3;

  // 第三种
  const box = BABYLON.MeshBuilder.CreateBox("box", {});
  box.scaling = new BABYLON.Vector3(2, 1.5, 3);

  // 设置盒子的位置
  // 第一种
  // box.position.x = -2;
  // box.position.y = 4.2;
  // box.position.z = 0.1;

  // 第二种
  // box.position = new BABYLON.Vector3(-2, 4.2, 0.1);

  // 旋转盒子
  box.rotation.y = Math.PI / 4;

  const ground = BABYLON.MeshBuilder.CreateGround("ground", {
    width: 10,
    height: 10,
  });
  // 自动播放声音
  // const sound = new BABYLON.Sound("name", "url", scene, null, {
  //   loop: true,
  //   autoplay: true,
  // });

  // 手动播放声音
  const sound = new BABYLON.Sound("name", "url", scene);
  // sound.play();
  setInterval(() => sound.play(), 3000);

  return scene;
}

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

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>