Babylon.js 第六节 相机和网格行为

一、相机行为

        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)