10. 建设村庄（添加声音） 

  1 <template>
  2   <div class="badylon-canvas2">
  3     <canvas ref="renderCanvas2" id="render-canvas2"></canvas>
  4   </div>
  5 </template>
  6 
  7 <script setup lang="ts">
  8 import * as BABYLON from "@babylonjs/core/Legacy/legacy";
  9 import "@babylonjs/loaders/OBJ";
 10 import "@babylonjs/loaders/glTF";
 11 import Assets from "../../utils/babylon/babylon-asset.js";
 12 import type { Engine, Scene } from "@babylonjs/core/Legacy/legacy";
 13 import { ref, onMounted } from "vue";
 14 
 15 type EngineType = Engine | null;
 16 type SceneType = Scene | null;
 17 
 18 const renderCanvas2 = ref<HTMLCanvasElement | null>(null);
 19 let engine: EngineType = null;
 20 let scene: SceneType = null;
 21 let sceneToRender: SceneType = null;
 22 
 23 function startRenderLoop(engine: Engine) {
 24   engine.runRenderLoop(() => {
 25     if (sceneToRender && sceneToRender.activeCamera) {
 26       sceneToRender.render();
 27     }
 28   });
 29 }
 30 
 31 function createDefaultEngine() {
 32   return new BABYLON.Engine(renderCanvas2.value, true, {
 33     // 这些选项在api完全搜索不到
 34     preserveDrawingBuffer: true,
 35     stencil: true,
 36     disableWebGL2Support: false,
 37   });
 38 }
 39 
 40 function createScene() {
 41   if (engine === null) return null;
 42   scene = new BABYLON.Scene(engine);
 43 
 44   const camera = new BABYLON.ArcRotateCamera(
 45     "camera",
 46     -Math.PI / 2,
 47     Math.PI / 2.5,
 48     10,
 49     new BABYLON.Vector3(0, 0, 0)
 50   );
 51   camera.attachControl(renderCanvas2.value, true);
 52 
 53   const light = new BABYLON.HemisphericLight(
 54     "light",
 55     new BABYLON.Vector3(1, 1, 0),
 56     scene
 57   );
 58 
 59   const box = BABYLON.MeshBuilder.CreateBox("box", {});
 60   box.position.y = 0.5; //盒子默认高度是1
 61   const ground = BABYLON.MeshBuilder.CreateGround("ground", {
 62     width: 10,
 63     height: 10,
 64   });
 65   // 自动播放声音
 66   // const sound = new BABYLON.Sound("name", "url", scene, null, {
 67   //   loop: true,
 68   //   autoplay: true,
 69   // });
 70 
 71   // 手动播放声音
 72   const sound = new BABYLON.Sound("name", "url", scene);
 73   // sound.play();
 74   setInterval(() => sound.play(), 3000);
 75 
 76   return scene;
 77 }
 78 
 79 async function initFunction() {
 80   async function asyncEngineCreation() {
 81     try {
 82       return createDefaultEngine();
 83     } catch (e) {
 84       console.log(
 85         "the available createEngine function failed. Creating the default engine instead"
 86       );
 87       return createDefaultEngine();
 88     }
 89   }
 90 
 91   engine = await asyncEngineCreation();
 92   if (!engine) throw "engine should not be null.";
 93   startRenderLoop(engine);
 94   scene = createScene();
 95 }
 96 
 97 onMounted(() => {
 98   if (renderCanvas2.value) {
 99     console.log("ttttt");
100     initFunction().then(() => {
101       sceneToRender = scene;
102     });
103     // Resize
104     window.addEventListener("resize", function () {
105       engine && engine.resize();
106     });
107   }
108 });
109 </script>
110 
111 <style lang="scss" scoped>
112 .badylon-canvas2 {
113   width: 100%;
114   height: 100%;
115 
116   #render-canvas2 {
117     width: 100%;
118     height: 100%;
119     // touch-action 用在触摸屏，缩放
120     touch-action: none;
121   }
122 }
123 </style>

 

posted @ 2022-10-19 14:57  sky-su  阅读(31)  评论(0)    收藏  举报