Babylon.js 第14节 网格点击事件

发布于:2022-12-26 ⋅ 阅读:(783) ⋅ 点赞:(0)

一、添加事件

要为网格添加点击事件,需要先将网格的事件管理器添加到场景,然后再注册事件:

    meshsArray.push(sphere,ground)
    //将网格动作管理器添加到场景
    meshsArray.forEach(Mesh=>Mesh.actionManager=new BABYLON.ActionManager(scene))
    //为网格注册事件
    ground.actionManager.registerAction(
        new BABYLON.InterpolateValueAction(
            //触发事件
            BABYLON.ActionManager.OnPickTrigger,
            light,
            'diffuse',
            BABYLON.Color3.Black(),
            1000
        )
    )

二、使用.then

    meshsArray.push(sphere,ground)
    //将网格动作管理器添加到场景
    meshsArray.forEach(Mesh=>Mesh.actionManager=new BABYLON.ActionManager(scene))
    //为网格注册事件
    
    sphere.actionManager
        .registerAction(
            new BABYLON.InterpolateValueAction(
                //触发事件
                BABYLON.ActionManager.OnPickTrigger,
                sphere.material,
                'wireframe',
                true
            )
        )
        .then(
            new BABYLON.SetValueAction(
                BABYLON.ActionManager.OnPickTrigger,
                light,
                'diffuse',
                BABYLON.Color3.Red(),
                1000
            )
        )
        //注册事件
        sphere.actionManager.registerAction(
            new BABYLON.InterpolateValueAction(
                BABYLON.ActionManager.OnPickTrigger,
                camera,
                'alpha',
                0,
                500,
                //设置条件方法
                new BABYLON.PredicateCondition(
                    sphere.actionManager,
                    function () {
                        return light.diffuse.equals(BABYLON.Color3.Red());
                    }
                )
            )
        );

使用.then可以连续添加方法,每单击一次,执行一个then。同时还可以添加条件判断。只有条件满足的时候才执行。

三、触发器

目前,网格有 14 种不同的触发器,场景有 3 种。

可用于网格的触发器是:

  • 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:当用户以毫秒为单位长时间触摸/单击网格时引发(由 BABYLON.Scene.LongPressDelay 定义)。
  • BABYLON.ActionManager.OnPointerOverTrigger:当指针在网格上时引发。只执行一次。
  • BABYLON.ActionManager.OnPointerOutTrigger:当指针不再位于网格上时引发。只执行一次。
  • BABYLON.ActionManager.OnIntersectionEnterTrigger:当网格与特定网格相交时引发。只执行一次。
  • BABYLON.ActionManager.OnIntersectionExitTrigger:当网格不再与特定网格相交时引发。只执行一次。

网格相交触发器需要指定特定的网格:

    meshsArray.push(sphere,ground)
    //将网格动作管理器添加到场景
    meshsArray.forEach(Mesh=>Mesh.actionManager=new BABYLON.ActionManager(scene))
    //为网格注册事件
    
    sphere.actionManager
        .registerAction(
            //设置操作值
            new BABYLON.SetValueAction(
                {
                    //网格相交触发器
                    trigger:BABYLON.ActionManager.OnIntersectionEnterTrigger,
                    parameter:{
                        mesh:ground,
                        //使用精确交点,可选属性,可直接使用网格作为参数
                        //usePreciseIntersection:true
                    }
                },
                sphere,
                'scaling',
                new BABYLON.Vector3(1,2,1)
            )
        )

 场景触发器:

  • BABYLON.ActionManager.OnEveryFrameTrigger:每帧提升一次。
  • BABYLON.ActionManager.OnKeyDownTrigger:按下某个键时触发。
  • BABYLON.ActionManager.OnKeyUpTrigger:释放键时引发。

OnKeyUpTrigger 和 OnKeyDownTrigger 触发器都接受一个字符串参数值,该值与事件的sourceEvent.key值进行比较。这允许创建仅在特定键上触发的键触发器 

示例:

    meshsArray.push(sphere,ground,scene)
    //将网格动作管理器添加到场景
    meshsArray.forEach(Mesh=>Mesh.actionManager=new BABYLON.ActionManager(scene))
    //为网格注册事件
    
    scene.actionManager
        .registerAction(
            //执行代码操作
            new BABYLON.ExecuteCodeAction(
                {
                    trigger:BABYLON.ActionManager.OnKeyUpTrigger,
                    parameter:'R'
                },
                ()=>alert('R触发')
            )
        )

 

 四、网格可用操作

大多数动作都有一个propertyPath属性。此字符串定义要影响操作的属性的路径。您可以使用直接值,例如positiondiffuse。但是您也可以提供复杂的路径,例如position.x

  • BABYLON.SwitchBooleanAction(trigger, target, propertyPath, condition): 切换一个布尔属性。
  • BABYLON.SetValueAction(trigger, target, propertyPath, value, condition):为属性设置直接值。
  • BABYLON.IncrementValueAction(trigger, target, propertyPath, value, condition):将数字添加到数字属性。
  • BABYLON.PlayAnimationAction(trigger, target, from, to, loop, condition):在目标上播放动画。
  • BABYLON.StopAnimationAction(trigger, target, condition):停止目标正在播放的任何动画。
  • BABYLON.DoNothingAction(trigger, condition):什么也不做 :)
  • BABYLON.CombineAction(trigger, children[], condition):同时执行多个动作。children 属性必须是一个动作数组。
  • BABYLON.ExecuteCodeAction(trigger, func, condition): 执行代码。
  • BABYLON.SetParentAction(trigger, target, parent, condition):设置目标的父级。
  • BABYLON.PlaySoundAction(trigger, sound, condition):播放给定的声音。
  • BABYLON.StopSoundAction(trigger, sound, condition):停止给定的声音
  • BABYLON.InterpolateValueAction(trigger, target, propertyPath, value, duration, condition, stopOtherAnimations):创建动画以将属性的当前值插入给定目标。支持以下类型:
    • number
    • BABYLON.Color3
    • BABYLON.Vector3
    • BABYLON.Quaternion

五、网格中的条件判断

有以下三种情况:

  • BABYLON.ValueCondition(actionManager, target, propertyPath, value, operator):当给定的属性和值符合运算符时为真。支持以下运算符:
    • BABYLON.ValueCondition.IsEqual
    • BABYLON.ValueCondition.IsDifferent
    • BABYLON.ValueCondition.IsGreater
    • BABYLON.ValueCondition.IsLesser
  • BABYLON.PredicateCondition(actionManager, predicate): 当给定的谓词函数返回 true 时为 true。
  • BABYLON.StateCondition(actionManager, target, value):当state目标的属性与给定值匹配时为真。

 示例:

    meshsArray.push(sphere,ground,scene)
    //将网格动作管理器添加到场景
    meshsArray.forEach(Mesh=>Mesh.actionManager=new BABYLON.ActionManager(scene))
    //为网格注册事件
    
    sphere.actionManager
        //注册动作
        .registerAction(
            //插值操作
            new BABYLON.InterpolateValueAction(
                BABYLON.ActionManager.OnPickTrigger,
                ground,
                'visibility',
                0.2,
                1000
            )
        )
        .then(
            new BABYLON.InterpolateValueAction(
                BABYLON.ActionManager.OnPickTrigger,
                ground,
                'visibility',
                1,
                1000
            )
        )

 点击球体一次,地面淡出,再点击一次,地面又淡入。


网站公告

今日签到

点亮在社区的每一天
去签到