13. 建设村庄（房子上贴片） 

  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   // 贴片
 60   const roofMat = new BABYLON.StandardMaterial("roofMat");
 61   roofMat.diffuseTexture = new BABYLON.Texture(
 62     "https://assets.babylonjs.com/environments/roof.jpg"
 63   );
 64   // const boxMat = new BABYLON.StandardMaterial("boxMat");
 65   // boxMat.diffuseTexture = new BABYLON.Texture(
 66   //   "https://www.babylonjs-playground.com/textures/floor.png"
 67   // );
 68 
 69   const box = BABYLON.MeshBuilder.CreateBox("box", {});
 70   box.position.y = 0.5;
 71   // box.material = boxMat;
 72   // 进一步了解 https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set
 73   const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {
 74     diameter: 1.3,
 75     height: 1.2,
 76     tessellation: 3,
 77   });
 78   roof.scaling.x = 0.75;
 79   roof.rotation.z = Math.PI / 2;
 80   roof.position.y = 1.22;
 81   roof.material = roofMat;
 82 
 83   const ground = BABYLON.MeshBuilder.CreateGround("ground", {
 84     width: 10,
 85     height: 10,
 86   });
 87 
 88   return scene;
 89 }
 90 
 91 async function initFunction() {
 92   async function asyncEngineCreation() {
 93     try {
 94       return createDefaultEngine();
 95     } catch (e) {
 96       console.log(
 97         "the available createEngine function failed. Creating the default engine instead"
 98       );
 99       return createDefaultEngine();
100     }
101   }
102 
103   engine = await asyncEngineCreation();
104   if (!engine) throw "engine should not be null.";
105   startRenderLoop(engine);
106   scene = createScene();
107 }
108 
109 onMounted(() => {
110   if (renderCanvas2.value) {
111     console.log("ttttt");
112     initFunction().then(() => {
113       sceneToRender = scene;
114     });
115     // Resize
116     window.addEventListener("resize", function () {
117       engine && engine.resize();
118     });
119   }
120 });
121 </script>
122 
123 <style lang="scss" scoped>
124 .badylon-canvas2 {
125   width: 100%;
126   height: 100%;
127 
128   #render-canvas2 {
129     width: 100%;
130     height: 100%;
131     // touch-action 用在触摸屏，缩放
132     touch-action: none;
133   }
134 }
135 </style>

 

posted @ 2022-10-19 16:49  sky-su  阅读(38)  评论(0)    收藏  举报