BabylonJS-メッシュへのアクション

アクションは、メッシュに相互作用を追加するために使用されます。イベントは、メッシュをクリックしたとき、またはメッシュが交差または衝突したときにアクティブになります。

構文

次の構文はactionmanagerを作成することです-

ground.actionManager = new BABYLON.ActionManager(scene);

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 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( .5, .5, .5);
            var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
            camera.setPosition(new BABYLON.Vector3(0, 0, -100));
            camera.attachControl(canvas, true);

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);
           // light.intensity = 0.7;

            var pl = new BABYLON.PointLight("pl", new BABYLON.Vector3(0, 0, 0), scene);
           //pl.diffuse = new BABYLON.Color3(1, 1, 1);
           //pl.specular = new BABYLON.Color3(1, 0, 0);
           //pl.intensity = 0.95;

            var gmat = new BABYLON.StandardMaterial("mat1", scene);
            gmat.alpha = 1.0;

           //gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            var texture = new BABYLON.Texture("images/mat.jpg", scene);
            gmat.diffuseTexture = texture;

            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);
            ground.material = gmat;

            ground.actionManager = new BABYLON.ActionManager(scene);
           //ground.actionManager.registerAction(
               new BABYLON.InterpolateValueAction(
                  BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Black(), 1000
               )
            );

            ground.actionManager.registerAction(
               new BABYLON.InterpolateValueAction(
                  BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Green(), 1000
               )
            ).then(new BABYLON.SetValueAction(
               BABYLON.ActionManager.NothingTrigger, ground.material, "wireframe", false));

            var mat = new BABYLON.StandardMaterial("mat1", scene);
            mat.alpha = 1.0;
            mat.diffuseColor = new BABYLON.Color3(1, 0, 0);
            var texture = new BABYLON.Texture("images/rugby.jpg", scene);
            mat.diffuseTexture = texture;

            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 5, diameterX:5}, scene);
            sphere.position= new BABYLON.Vector3(15,0,0);
            sphere.material = mat;

            sphere.actionManager = new BABYLON.ActionManager(scene);

           //sphere.actionManager.registerAction(
               new BABYLON.InterpolateValueAction(
                  BABYLON.ActionManager.OnPickTrigger, camera, "alpha", 0, 500, condition1));

            scene.registerBeforeRender(function () {
              //sphere.actionManager.registerAction(new BABYLON.SetValueAction({
                  trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger,
                  parameter: ground
               }, sphere, "scaling", new BABYLON.Vector3(1.2, 1.2, 1.2)));

               sphere.actionManager.registerAction(new BABYLON.SetValueAction({
                  trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger,
                  parameter: { mesh:ground, usePreciseIntersection: true}
               }, sphere, "scaling", new BABYLON.Vector3(1.2, 1.2, 1.2)));
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

出力

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

アクションマネージャー

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

地面と球体に使用される画像を以下に示します。

images/mat.jpg

mat_image

images/rugby.jpg

rugby_image

説明

アクションは地面に対して作成されます。 actionmanagerが作成されたら、アクションを登録する必要があります。

InterpolateValueActionイベントは、誰かが地面をクリックするとトリガーされるOnPickTriggerを呼び出します。光が拡散され、色が緑に変わります。

次のようなアクションマネージャーのトリガーがあります-

BABYLON.ActionManager.NothingTrigger -決して発生しません。 action .then関数を持つサブアクションに使用されます。
BABYLON.ActionManager.OnPickTrigger -ユーザーがメッシュをタッチ/クリックすると発生します。
BABYLON.ActionManager.OnDoublePickTrigger -ユーザーがメッシュをダブルタッチ/クリックすると発生します。
BABYLON.ActionManager.OnPickDownTrigger -ユーザーがメッシュをタッチ/クリックすると発生します。
BABYLON.ActionManager.OnPickUpTrigger -ユーザーがメッシュをタッチ/クリックすると発生します。
BABYLON.ActionManager.OnPickOutTrigger -ユーザーがメッシュをタッチ/クリックしてからメッシュの外に移動すると発生します。
BABYLON.ActionManager.OnLeftPickTrigger -ユーザーが左ボタンでメッシュをタッチ/クリックすると発生します。
BABYLON.ActionManager.OnRightPickTrigger ：ユーザーが右ボタンでメッシュをタッチ/クリックすると発生します。
BABYLON.ActionManager.OnCenterPickTrigger -ユーザーが中央ボタンのあるメッシュをタッチ/クリックすると発生します。
BABYLON.ActionManager.OnLongPressTrigger -ユーザーがメッシュを長時間タッチまたはクリックしたときに発生します（BABYLONActionManager.LongPressDelayで定義）。
BABYLON.ActionManager.OnPointerOverTrigger -ポインターがメッシュ上にあるときに発生します。一度だけ発生します。
BABYLON.ActionManager.OnPointerOutTrigger -ポインターがメッシュ上にないときに発生します。一度だけ発生します。
BABYLON.ActionManager.OnIntersectionEnterTrigger -メッシュが別のメッシュと交差するときに発生します。一度だけ発生します。
BABYLON.ActionManager.OnIntersectionExitTrigger -メッシュが別のメッシュと交差しなくなったときに発生します。一度だけ発生します。
BABYLON.ActionManager.OnKeyDownTrigger -キーが押されたときに発生します。
BABYLON.ActionManager.OnKeyUpTrigger -キーが上がったときに発生します。

Babylonjs-actions-to-mesh

目次

BabylonJS-メッシュへのアクション

構文

Demo

出力

images/mat.jpg

images/rugby.jpg

説明