BabylonJS-メッシュモーフターゲット

線、リボン、多角形などの変形を見てきました。さて、このデモでは球と箱のモーフィングが見られます。モーフターゲットを使用すると、球の形状が変更されます。これは以下のデモで見られます。

構文

var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);
var manager = new BABYLON.MorphTargetManager();
box.morphTargetManager = manager;

Demo

<!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 scrambleUp = function(data) {
            console.log(data);
            for (index = 0; index < data.length; index ++) {
               data[index] += 1.8 *Math.random();
            }
         }

         var scrambleDown = function(data) {
            for (index = 0; index < data.length; index ++) {
               data[index] -= 1.8* Math.random();
            }
         }

         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);

         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

           //This creates and positions a free camera (non-mesh)
            var camera = new BABYLON.ArcRotateCamera("camera1", 1.14, 1.13, 10, BABYLON.Vector3.Zero(), scene);

           //This targets the camera to scene origin
            camera.setTarget(BABYLON.Vector3.Zero());

           //This attaches the camera to the canvas
            camera.attachControl(canvas, true);

           //This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

           //Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

           //Our built-in 'sphere' shape. Params: name, subdivs, size, scene
            var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);//BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

            var materialSphere = new BABYLON.StandardMaterial("mat", scene);
            materialSphere.diffuseTexture = new BABYLON.Texture("images/sphere.jpg", scene);
            box.material = materialSphere;

           //var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);//BABYLON.Mesh.CreateBox("box", 6.0, scene);
            var box1 = BABYLON.Mesh.CreateBox("box2", 3.0, scene);
            box1.setEnabled(false);
            box1.updateMeshPositions(scrambleUp);
            var manager = new BABYLON.MorphTargetManager();
            box.morphTargetManager = manager;

            var target0 = BABYLON.MorphTarget.FromMesh(box1, "sphere2", 0.25);
            manager.addTarget(target0);

            var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 2, scene);//BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
            sphere.position.x="10";

            var materialSphere = new BABYLON.StandardMaterial("mat", scene);
            materialSphere.diffuseTexture = new BABYLON.Texture("sphere.jpg", scene);
            sphere.material = materialSphere;

            var sphere2 = BABYLON.Mesh.CreateSphere("sphere2", 16, 2, scene);//BABYLON.Mesh.CreateBox("box", 6.0, scene);
            sphere2.setEnabled(false);
            sphere2.updateMeshPositions(scrambleUp);

            var manager1 = new BABYLON.MorphTargetManager();
            sphere.morphTargetManager = manager1;

            var target2 = BABYLON.MorphTarget.FromMesh(sphere2, "sphere4", 0.25);
            manager1.addTarget(target2);
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

上記のコード行は、次の出力を生成します-

morph_targets

このデモでは、 sphere.jpg イメージを使用しました。画像はimages/フォルダにローカルに保存され、参照用に以下に貼り付けられます。選択した任意の画像をダウンロードして、デモリンクで使用できます。

images/sphere.jpg

Sphere Images

説明

var box = BABYLON.Mesh.CreateBox("box1", 3.0, scene);
var manager = new BABYLON.MorphTargetManager();
box.morphTargetManager = manager;

上記のコードはボックスを作成し、morphTargetManagerに追加します。これを理解するために次の例を検討してください-

box.morphTargetManager = manager;

モーフオブジェクトを作成するには、次のコマンドを実行して、メッシュをmorphTargetManagerに割り当てます。

var manager = new BABYLON.MorphTargetManager();

次のように別のボックスが作成されます-

var box1 = BABYLON.Mesh.CreateBox("box2", 3.0, scene);
box1.setEnabled(false);
box1.updateMeshPositions(scrambleUp);
var manager = new BABYLON.MorphTargetManager();
box.morphTargetManager = manager;
var target0 = BABYLON.MorphTarget.FromMesh(box1, "box2", 0.25);
manager.addTarget(target0);

ボックスはupdateMeshPositions（scrambleUp）を呼び出します。 scrambleUpは、乱数を追加する関数です。

var target0 = BABYLON.MorphTarget.FromMesh(box1, "box2", 0.25);
manager.addTarget(target0);

上記のコードは、box1にmorphtargetを作成し、それに-0.25の影響を追加します。

結果を確認するには、ブラウザーで上記のデモを確認してください。

Babylonjs-mesh-morph-targets

目次

BabylonJS-メッシュモーフターゲット

構文

Demo

出力

images/sphere.jpg

説明