babylonjs behaviors

614 阅读3分钟

behavior是3.1版本开始添加的功能,可以附加到一个目标上,将由定义的事件触发,提供一组特定的功能。

Camera Behaviors

Bouncing Behavior

在ArcRotateCamera到达lowerRadiusLimit或是upperRadiusLimit时触发,会用一个跳动效果来提示镜头已经无法再拉近/拉远。

//简化设置
camera.useBouncingBehavior = true;

//完整设置
const bb = new BABYLON.BouncingBehavior()

bb.transitionDuration = 450 //跳动效果时间,默认450,单位ms
bb.lowerRadiusTransitionRange  = 2 //到达lowerRadiusLimit时跳动效果变动的Radius,默认为2
bb.upperRadiusTransitionRange = -2 //到达upperRadiusLimit时跳动效果变动的Radius,默认为2
bb.autoTransitionRange = false //bool值,指示lowerRadiusTransitionRange和upperRadiusTransitionRange是否自动定义,过渡范围将设置为世界空间中边界框对角线的 5%。

camera.addBehavior(bb)

AutoRotation Behavior

在没有用户操作时让ArcRotateCamera平滑地自动旋转。

//简化设置
camera.useAutoRotationBehavior = true;

//完整设置
const ab = new BABYLON.AutoRotationBehavior() 

ab.idleRotationSpeed = 450 //相机旋转速度
ab.idleRotationWaitTime = 5000;//在用户操作后再次开始自动旋转所需要等待的时间,单位为ms
ab.idleRotationSpinupTime = 10000;//在重新开始旋转后从静止加速到相机旋转速度所需要的时间,单位为ms

camera.addBehavior(ab)

Framing Behavior

当把ArcRotateCamera的目标设置为一个模型时让相机自动定位到那个模型。

camera.useFramingBehavior = true;

//完整设置
const fb = new BABYLON.FramingBehavior()

fb.radiusScale = 3 //相机半径比例,默认1
fb.positionScale = 1 //相机中心在y轴位置比例,默认为0.5,即相机中心在模型y轴中心
fb.defaultElevation = Math.PI/2 //当相机旋转到水平面以下时会自动提升到的beta值,默认0.3
fb.elevationReturnTime = 2000 //提升过程需要的时间,单位ms,默认1500
fb.elevationReturnWaitTime = 2000 //提升前的等待时间,单位ms,默认1000
fb.zoomStopsAnimation = true //zoom过程是否会打断动画
fb.framingTime = 2000 //提升动画时间,单位ms,默认1500

camera.addBehavior(fb)

Mesh Behaviors

添加到mesh上的行为。

PointerDragBehavior

绑定后可用用光标在一个特定轴方向上对mesh进行拖动。

    //确定拖动轴
    var pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,1,0)});
    
    // 忽略mesh旋转角度对拖动轴的影响,让拖动轴只和世界坐标相关
    pointerDragBehavior.useObjectOrientationForDragging = false;

    //设定拖动全过程的触发事件
    pointerDragBehavior.onDragStartObservable.add((event)=>{
        console.log("dragStart");
        console.log(event);
    })
    pointerDragBehavior.onDragObservable.add((event)=>{
        console.log("drag");
        console.log(event);
    })
    pointerDragBehavior.onDragEndObservable.add((event)=>{
        console.log("dragEnd");
        console.log(event);
    })

    // If handling drag events manually is desired, set move attached to false
    // pointerDragBehavior.moveAttached = false;

    sphere.addBehavior(pointerDragBehavior);

SixDofDragBehavior

让绑定的mesh可以根据camera或是vr控制器在空间中的相对位置进行拖动。

var gltfMesh = container.meshes[0]
var boundingBox = BABYLON.BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(gltfMesh)
var sixDofDragBehavior = new BABYLON.SixDofDragBehavior()
        
//每帧拖动的距离比,默认为0.2,1为无延迟拖动。
sixDofDragBehavior.dragDeltaRatio = 0.2;
sixDofDragBehavior.zDragFactor = 0.2;
        
boundingBox.addBehavior(sixDofDragBehavior)

MultiPointerScaleBehavior

让绑定的mesh可以用两点操控放大缩小。

var gltfMesh = container.meshes[0]
var boundingBox = BABYLON.BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(gltfMesh)

var multiPointerScaleBehavior = new BABYLON.MultiPointerScaleBehavior()
boundingBox.addBehavior(multiPointerScaleBehavior)

AttachToBoxBehavior

为绑定的mesh添加ui控件。

//appBar是添加的UI
var behavior = new BABYLON.AttachToBoxBehavior(appBar);
boundingBox.addBehavior(behavior);

FollowBehavior

让绑定的mesh跟随相机移动。


var followBehavior = new BABYLON.FollowBehavior();
followBehavior.attach(mesh);

SurfaceMagnetismBehavior

这是用来使一个mesh贴在另一个mesh上,并沿其法线方向排列。例如,它可以用于XR体验中,让UI控件贴在墙上。

var surfaceMagnetismBehavior = new BABYLON.SurfaceMagnetismBehavior();
surfaceMagnetismBehavior.attach(mesh);
surfaceMagnetismBehavior.meshes = meshes;

HandConstraintBehavior

让被绑定的mesh跟随使用者的手移动。

var handConstraintBehavior = new BABYLON.HandConstraintBehavior();
handConstraintBehavior.attach(mesh);
handConstraintBehavior.linkToXRExperience(xr);