cocos creator 笔记-视角转动_cocos setrotation-CSDN博客

本文链接：https://blog.csdn.net/qq_22071421/article/details/126448033

本文介绍如何在Cocos Creator中通过鼠标右键滑动来控制视角转动，限制最大角度以保持平稳体验。采用四元数转欧拉角的方法简化视角调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编译器版本 3.5.2

这里使用鼠标右键滑动监听视角转动，定义上下角度不超过8度，左右不超过20度，避免晃动太剧烈。按下和抬起的时候记录位置，然后进行方向转动


    private rotax:number=8;
    private rotay:number=20;

    private mouseDownX:number=0;
    private mouseDownY:number=0;
    private mouseUpX:number=0;
    private mouseUpY:number=0;

    private box=new BoxCollider();

    start() {
        input.on(Input.EventType.MOUSE_DOWN, this.onMouseDownRight, this);
        input.on(Input.EventType.MOUSE_UP, this.onMouseUpRight, this);
   }

   onMouseDownRight(event:EventMouse){
        if(event.getButton()==2){
            this.mouseDownX=event.getLocationX();
            this.mouseDownY=event.getLocationY();
        }
    }
    onMouseUpRight(event:EventMouse){
        if(event.getButton()==2){
            this.mouseUpX=event.getLocationX();
            this.mouseUpY=event.getLocationY();
            viewUtil.viewTransfer(this.mouseUpY-this.mouseDownY,this.mouseUpX-this.mouseDownX,this.node,this.rotay,this.rotax)
        }
    }

  /**
     * 处理视角移动
     * @param x 鼠标垂直移动距离
     * @param y 鼠标水平移动距离
     * @param node 当前节点
     * @param rotay 水平限定角度
     * @param rotax 垂直限定角度
     */
    static viewTransfer(x:number,y:number,node:Node,rotay:number,rotax:number){
        let rota_move=new Quat();
        let rota_cur=new Quat();
        x=x*360/1000;
        y=-y*360/1000;
        node.getRotation(rota_cur);
        Quat.toEuler(rota_move,rota_cur)
        let tempx=0;
        if(rota_move.x+x>rotax){
            tempx=rotax;
        } else if(rota_move.x+x<-rotax){
            tempx=-rotax;
        }else{
            tempx=x
        }
        let tempy=0;
        if(y>rotay){
            tempy=rota_move.y+rotay;
        } else if(y<-rotay){
            tempy=rota_move.y-rotay;
        }else{
            tempy=rota_move.y+y
        }
        let rota_target=new Vec3(-tempx,tempy,0);
        node.setRotationFromEuler(rota_target);
    }

还是将四元数转为欧拉角，比人物移动要简单一些，只需要设置方向就行。