BabylonJS - Actions to Mesh

Actions are used to add interaction to the mesh. Events are activated when you click on the mesh, or when mesh intersects or collides.

Syntax

The following syntax is to create 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>

Output

The above line of code generates the following output −

Action Manager

In this demo, we have used images called mat.jpg, rugby.jpg. The images are stored in the images/ folder locally and are also pasted below for reference. You can download any image of your choice and use in the demo link.

Images used for ground and sphere are shown below.

images/mat.jpg

mat_image

images/rugby.jpg

rugby_image

Explanation

The action is created for the ground. Once the actionmanager is created, you need to register the action.

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));

The InterpolateValueAction event calls the OnPickTrigger, which is triggered when someone clicks on the ground. The light is diffused and the color is changed to Green.

There are more triggers for action manager which are as follows −

  • BABYLON.ActionManager.NothingTrigger − Never raised. Used for sub-actions with action .then function.

  • BABYLON.ActionManager.OnPickTrigger − Raised when the user touches/clicks on a mesh.

  • BABYLON.ActionManager.OnDoublePickTrigger − Raised when the user double touches/clicks on a mesh.

  • BABYLON.ActionManager.OnPickDownTrigger − Raised when the user touches/clicks down on a mesh.

  • BABYLON.ActionManager.OnPickUpTrigger − Raised when the user touches/clicks up on a mesh.

  • BABYLON.ActionManager.OnPickOutTrigger − Raised when the user touches/clicks down on a mesh and then move off-of the mesh.

  • BABYLON.ActionManager.OnLeftPickTrigger − Raised when the user touches/clicks on a mesh with left button.

  • BABYLON.ActionManager.OnRightPickTrigger:Raised when the user touches/clicks on a mesh with right button.

  • BABYLON.ActionManager.OnCenterPickTrigger − Raised when the user touches/clicks on a mesh with center button.

  • BABYLON.ActionManager.OnLongPressTrigger − Raised when the user touches/clicks up on a mesh for a long period of time (defined by BABYLONActionManager.LongPressDelay).

  • BABYLON.ActionManager.OnPointerOverTrigger − Raised when the pointer is over a mesh. Raised just once.

  • BABYLON.ActionManager.OnPointerOutTrigger − Raised when the pointer is no more over a mesh. Raised just once.

  • BABYLON.ActionManager.OnIntersectionEnterTrigger − Raised when the mesh is in intersection with another mesh. Raised just once.

  • BABYLON.ActionManager.OnIntersectionExitTrigger − Raised when the mesh is no more in intersection with another mesh. Raised just once.

  • BABYLON.ActionManager.OnKeyDownTrigger − Raised when a key is press.

  • BABYLON.ActionManager.OnKeyUpTrigger − Raised when a key is up.

babylonjs_mesh.htm
Advertisements