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