Laya实现控制杆控制3D模型旋转_laya操控模型

export default class JoyStick{
    constructor(mod){
        this.model = mod;// 模型
        this.scale = Laya.Browser.width / 1920;
        this.rockerBtnOrigin = new Laya.Point(100 * this.scale, 100 * this.scale); 
        this.initView()   
        this.originPoint = new Laya.Point(this.rockerView.width/2,this.rockerView.height/2);
        this.firstPostion = new Laya.Point(0,0);// 遥杆内部按钮的初始位置
        /***摇杆的角度****/
        this.angle = -1;        
        /***摇杆的弧度****/
        this.radians = -1;
        this.deltaX = 0;
        this.deltaY = 0;
        Laya.timer.loop(30,this,this.onUpdate);
    }

    initView(){ // 绘制控制摇杆
        this.rockerView = new Laya.Sprite();
		this.rockerView.size(400 * this.scale, 400 * this.scale);
		this.rockerView.pos(40 * this.scale, Laya.Browser.height - 420 * this.scale);

		let rockerBg = new Laya.Image('./res/rocker-bg.png');
		rockerBg.size(400 * this.scale, 400 * this.scale);

		this.rockerBtn = new Laya.Button('./res/rocker-btn.png');
		this.rockerBtn.size(200 * this.scale, 200 * this.scale);
		this.rockerBtn.stateNum = 2;
		this.rockerBtn.pos(this.rockerBtnOrigin.x, this.rockerBtnOrigin.y);
        this.rockerBtn.on(Laya.Event.MOUSE_DOWN,this,this.onRockerDown);
		this.rockerView.addChild(rockerBg);
        this.rockerView.addChild(this.rockerBtn);
        Laya.stage.addChild(this.rockerView);
        Laya.stage.on(Laya.Event.MOUSE_UP,this,this.onRockekrUp);
        Laya.stage.on(Laya.Event.MOUSE_OUT,this,this.onRockekrUp);
        this.rockerView.zOrder = 50;
    }

    hideView(){
        this.rockerView.visible = false;
    }

    showView(){
        this.rockerView.visible = true;
    }

    getRockerView(){
        return this.rockerView;
    }

    onUpdate(){
        if (this.rockerBtn.x !== this.rockerBtnOrigin.x || this.rockerBtn.y !== this.rockerBtnOrigin.y) {
            var dx = this.deltaX;
            var dy = this.deltaY;
            if (Math.abs(dx) <= 20 && Math.abs(dy) <= 20) return;
            var angle = 3;
            if (Math.abs(dx) > Math.abs(dy)) {
                this.model.transform.rotate(new Laya.Vector3(0,dx > 0 ? angle : -angle,0),true,false);// 模型旋转
            } else {
                this.model.transform.rotate(new Laya.Vector3(dy > 0 ? -angle : angle,0,0),false,false);
            }
        }
    }

    onRockerDown(e){
        this.rockerBtn.startDrag();
        this.firstPostion.x = e.stageX;
        this.firstPostion.y = e.stageY;
        Laya.stage.on(Laya.Event.MOUSE_MOVE,this,this.onRockerMove);
        Laya.stage.on(Laya.Event.MOUSE_UP,this,this.onRockerUp)
    }

    onRockerUp(e){
        this.rockerBtn.pos(this.rockerBtnOrigin.x, this.rockerBtnOrigin.y);
        Laya.stage.off(Laya.Event.MOUSE_MOVE,this,this.onRockerMove);
    }

    // 控制rockerBtn的移动范围
    onRockerMove(e){
        var locationPos = this.rockerView.globalToLocal(new Laya.Point(e.stageX,e.stageY),false);
        this.deltaX = locationPos.x - this.originPoint.x;
        this.deltaY = locationPos.y - this.originPoint.y;
        var dx = this.deltaX * this.deltaX;
        var dy = this.deltaY * this.deltaY;
        this.angle = Math.atan2(this.deltaX,this.deltaY) * 180 / Math.PI;
        if (this.angle < 0) this.angle += 360;
        this.angle = Math.round(this.angle);
        this.radians = Math.PI / 180 * this.angle;
        if (dx + dy >=  (this.rockerView.width/2 - this.rockerBtn.width/2) * (this.rockerView.width/2 - this.rockerBtn.width/2)) {
            var x = Math.floor(Math.sin(this.radians) * (this.rockerView.width/2 - this.rockerBtn.width/2) + this.originPoint.x);
            var y = Math.floor(Math.cos(this.radians) * (this.rockerView.width/2 - this.rockerBtn.width/2) + this.originPoint.y);
            this.rockerBtn.pos(x - this.rockerBtn.width / 2,y - this.rockerBtn.height / 2);
        } else {
            this.rockerBtn.pos(locationPos.x - this.rockerBtn.width / 2,locationPos.y - this.rockerBtn.height / 2);
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97