BabylonJS-メッシュのインポート

このセクションでは、Babylonを使用してメッシュをインポートする方法を学習します-

Blenderを使用する

Blenderはオープンソースソフトウェアです。公式サイトhttps://www.blender.org/[www.blender.org]から同じものをダウンロードできます。

スクリーンショットブレンダーウェブサイト

オペレーティングシステムごとにソフトウェアをダウンロードします。ソフトウェアをインストールし、以下の手順に従ってBlenderでメッシュを作成します。

Blenderを使用するには、以下に示す手順を考慮してください-

ステップ1 *-まず、blenderをbabylonjsに変換するためのプラグインをインストールする必要があります。プラグインはhttps://github.com/BabylonJS/Exporters/tree/master/Blender[Blender2Babylon-X.X.zip]から入手できます。 Expoters/Blenderで、io_export_babylon.pyまたは_init_.pyファイルをコピーし、以下に示すようにBlenders Addonsディレクトリに貼り付けます。

エクスポーターをBlenderにインストールする

以下の手順に従って、エクスポーターをBlenderにインストールします-

ステップ1 *-Blenderソフトウェアを開き、ファイルからuserpreferencesを選択します。次に、[アドオン]タブに移動します。

ExporterをBlenderにインストール

下部に、[ファイルからインストール]アイコンが表示されます。

ステップ2 *-Babylonディレクトリからファイル、つまりステップ1でダウンロードしたzipを選択します。ファイルio_export_babylon.pyまたは__init_.pyを取得し、右側の[ファイルからインストール]オプションをクリックします。

ディレクトリからファイルを選択

ステップ3 *-インストール後、Import-Export：Babylon.jsオプションが表示されます。チェックボックスをクリックし、ユーザー設定を保存します。

ユーザー設定の保存

これで、任意のブレンダーファイルを.babylonにエクスポートできます。

ステップ4 *-babylonjsにエクスポートするブレンダーファイルを選択します。ブレンダーファイルを保存していない場合は、https://www.blender.org/download/demo-files/[www.blender.org]から同じファイルを入手できます。

エクスポートするファイルを選択

ステップ5 *-ブレンダーファイルを開きます。

Blenderファイルを開く

必要に応じて、変更を追加し、以下に示すようにエクスポートできます。

エクスポートへの変更の追加

Demo

ブレンダーからファイルをエクスポートし、ローカルでscenes/フォルダーにbuggy2.1.babylonとして保存します。これは、メッシュを作成するためのすべての位置と必要な詳細を含むjsonファイルです。以下のコードでは、ブレンダーからエクスポートされたファイルを使用しています。

<!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-import-mesh

BabylonJS-メッシュのインポート

Blenderを使用する

エクスポーターをBlenderにインストールする

Demo

出力

説明

目次