一、相机行为
1.弹跳行为
使用以下代码:
camera.lowerRadiusLimit=10
camera.upperRadiusLimit=50
camera.useBouncingBehavior=true
当相机达到边界时就会出现反弹。
2. 自旋行为
使用以下代码:
camera.useAutoRotationBehavior=true
3.框架行为
使用以下代码:
camera.useFrameingBehavior=true
二、网格行为
(1)拖动网格:
let boxs=BABYLON.MeshBuilder.CreateBox('boxa',{width:5,height:3,depth:4},scene)
//定义拖动行为,拖动的轴方向为(1,0,0)
var pointerDragBehavior=new BABYLON.PointerDragBehavior(
{dragAxis:new BABYLON.Vector3(1,0,0)})
pointerDragBehavior.useObjectOrientationForDragging=false
//拖动平面将在每一帧上更新。要禁用此功能,请设置updateDragPlane为 false。
pointerDragBehavior.updateDragPlane=false
//添加事件监听
pointerDragBehavior.onDragStartObservable.add(event=>{
console.dir(event)
})
pointerDragBehavior.onDragObservable.add(event=>{
console.dir(event)
})
pointerDragBehavior.onDragEndObservable.add(event=>{
console.dir(event)
})
//添加拖动的网格
boxs.addBehavior(pointerDragBehavior)
默认情况下,拖动平面/轴将根据对象的方向进行修改。要将指定的轴/平面固定在世界上,请设置useObjectOrientationForDragging
为 false。
要在不移动附加网格的情况下使用拖动行为,请设置moveAttached
为 false,然后就可以在事件监听中添加交互事件:
pointerDragBehavior.moveAttached=false
要禁用所有拖动行为,需设置enabled
为 false:
pointerDragBehavior.enabled=false
获取拖动网格的相关事件:
1.拖动网格的指针
pointerDragBehavior.currentDraggingPointerID
2.获取拖动的最后位置
pointerDragBehavior.lastDragPosition
3.网格是否被拖动
pointerDragBehavior.dragging
(2)六面自由拖动
var sixDofDragBeHavior=new BABYLON.SixDofDragBehavior()
//每帧移动到目标到拖动位置的距离。这对于避免抖动很有用。
//将此设置为 1 无延迟。(默认值:0.2)
sixDofDragBeHavior.dragDeltaRatio=0.2
//同上
sixDofDragBeHavior.zDragFactor=0.2
box.addBehavior(sixDofDragBeHavior)
(3)在网格上添加UI
//添加appbar,添加GUI
var manager = new BABYLON.GUI.GUI3DManager(scene);
var appBar = new BABYLON.TransformNode("");
appBar.scaling.scaleInPlace(0.5)
var panel = new BABYLON.GUI.PlanePanel();
panel.margin = 0;
panel.rows = 1;
manager.addControl(panel);
panel.linkToTransformNode(appBar);
var button = new BABYLON.GUI.HolographicButton("orientation");
panel.addControl(button);
button.text = "Button #";
//为按钮添加事件
button.onPointerClickObservable.add(()=>{
if(gizmo.attachedMesh){
gizmo.attachedMesh = null;
boundingBox.removeBehavior(sixDofDragBehavior)
boundingBox.removeBehavior(multiPointerScaleBehavior)
}else{
gizmo.attachedMesh = boxx;
boundingBox.addBehavior(sixDofDragBehavior)
boundingBox.addBehavior(multiPointerScaleBehavior)
}
})
//把appbar添加到网格顶部
var behavor=new BABYLON.AttachToBoxBehavior(appBar)
boxx.addBehavior(behavor)
(4)缩放网格
缩放网格使用 MultiPointerScaleBehavior()方法,
let boxs=BABYLON.MeshBuilder.CreateBox('boxa',{width:5,height:3,depth:4},scene)
//使boxs不可选区并被包裹在边框中
let boxx=BABYLON.BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(boxs)
boxs.scaling.scaleInPlace(1)
//添加渲染器
var utilLayer=new BABYLON.UtilityLayerRenderer(scene)
utilLayer.utilityLayerScene.autoClearDepthAndStencil=false
//创建边界线框
var gizmo=new BABYLON.BoundingBoxGizmo(BABYLON.Color3.FromHexString('#0984e3',
utilLayer))
gizmo.attachedMesh=boxx
var multiPointerScaleBehavior=new BABYLON.MultiPointerScaleBehavior()
boxx.addBehavior(multiPointerScaleBehavior)