BabylonJS - 匯入網格

在本節中，我們將學習如何使用 Babylon 匯入網格 -

使用 Blender

Blender 是一款開源軟體。您可以在其官方網站 www.blender.org 下載。

以下是下載部分的螢幕截圖： Blender 網站螢幕截圖

根據您的作業系統下載軟體。安裝軟體並按照以下步驟在 Blender 中建立網格。

請考慮以下步驟來使用 Blender -

步驟 1 - 首先，我們需要安裝將 Blender 轉換為 BabylonJS 的外掛。我們可以在 Blender2Babylon-X.X.zip 獲取外掛。在 Expoters/Blender 中複製 io_export_babylon.py 或 _init_.py 檔案，並將其貼上到 Blender 的 Addons 目錄中，如下所示。

將匯出器安裝到 Blender 中

請按照以下步驟將匯出器安裝到 Blender 中 -

步驟 1 - 開啟 Blender 軟體，然後從檔案選單中選擇使用者偏好設定。現在，轉到載入項選項卡。

在底部，您將看到從檔案安裝圖示。

步驟 2 - 從 Babylon 目錄中選擇檔案，即步驟 1 中下載的 zip 檔案。獲取 io_export_babylon.py 或 __init__.py 檔案，然後單擊右側的從檔案安裝選項。

步驟 3 - 安裝後，您將獲得匯入-匯出：Babylon.js 選項。單擊複選框並儲存使用者設定。

現在您可以將任何 Blender 檔案匯出為 .babylon。

步驟 4 - 選擇要匯出到 BabylonJS 的 Blender 檔案。如果您沒有任何 Blender 檔案，您可以從 www.blender.org 獲取。

步驟 5 - 開啟 Blender 檔案。

如果需要，您可以新增任何更改並匯出，如下所示。

演示

從 Blender 中匯出檔案，並將其儲存在本地 scenes/ 資料夾中，例如 buggy2.1.babylon。這是一個 json 檔案，其中包含所有位置和建立網格所需的必要詳細資訊。在下面給出的程式碼中，我們使用了從 Blender 匯出的檔案。

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(1, 1, 1);
            
            //Adding a light
            var light = new BABYLON.HemisphericLight("Hemi", new BABYLON.Vector3(0, 1, 0), scene);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", -1.85, 1.2, 200, BABYLON.Vector3.Zero(), scene);

            camera.attachControl(canvas, true);

            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "scenes/", "buggy2.1.babylon", scene, function (newMeshes) {
               var buggy2 = newMeshes[0];
               camera.target = buggy2;

               var decalMaterial = new BABYLON.StandardMaterial("decalMat", scene);
               var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 300, height:15}, scene);
               ground.material = decalMaterial;	
            });	
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

輸出

以上程式碼行將生成以下輸出 -

解釋

要匯入您建立的網格，請執行以下程式碼行 -

BABYLON.SceneLoader.ImportMesh("", "scenes/", "buggy2.1.babylon", scene, function (newMeshes) {})

匯入網格獲取從資料夾中儲存的 .babylon 檔案，並允許訪問網格的屬性，其詳細資訊在 newMeshes 中可用。

babylonjs_mesh.htm

列印頁面