Metaverse/src/RotationEvent.js

export default class RotationEvent {
    constructor(e) {
        E(this, "touchStartX");
        E(this, "touchStartY");
        E(this, "handelResize");
        E(this, "_room");
        E(this, "_canvas");
        E(this, "handleTouchStart", e=>{
            const t = e.touches[0];
            this.touchStartX = t.pageX,
            this.touchStartY = t.pageY,
            this._room.emit("touchStart", {
                event: e
            })
        }
        );
        E(this, "handleMouseDown", e=>{
            this.touchStartX = e.pageX,
            this.touchStartY = e.pageY
        }
        );
        E(this, "handleMouseMove", e=>{
            if (!this.touchStartX || !this.touchStartY)
            {
                return;
            }
            // const t = e.pageX
            //   , r = e.pageY
            //   , n = t - this.touchStartX
            //   , o = r - this.touchStartY
            //   , a = this._room.options.canvas.offsetHeight
            //   , s = this._room.options.canvas.offsetWidth;
            // let l = 2 * o / a
            //   , u = 2 * n / s;
            // l > 1 && (l = 1),
            // u > 1 && (u = 1),
            // this._room.actionsHandler.rotate({
            //     pitch: l,
            //     yaw: u
            // }),
            // this.touchStartX = t,
            // this.touchStartY = r

            const pageX = e.pageX
            const pageY = e.pageY
            const offsetX = pageX - this.touchStartX
            const offsetY = pageY - this.touchStartY
            const canvasHeight = this._room.options.canvas.offsetHeight
            const canvasWidth = this._room.options.canvas.offsetWidth

            if(window.initFinished) {
                // 旋转中
                if(window.rotating) return

                // offset累计
                if(!this.offset) this.offset = 0
                this.offset += offsetX

                // 累计超过6度
                let angle = this.offset / canvasWidth * (2*Math.PI)
                angle = Math.round(angle / (Math.PI/30)) * (Math.PI/30)
                if(Math.abs(angle) < Math.PI/30) return

                // 开始旋转
                this._room.actionsHandler.rotate({
                    type: 'rotate',
                    angle: Math.PI/30 * Math.sign(angle)    // 目前固定1次mousemove只转1帧
                });

                // 重置累计
                this.offset = 0
            }

            this.touchStartX = pageX;
            this.touchStartY = pageY;
        }
        );
        E(this, "handleMouseUp", ()=>{
            this.touchStartX = void 0,
            this.touchStartY = void 0
        }
        );
        E(this, "handleTouchMove", e=>{
            if (!this.touchStartX || !this.touchStartY)
                return;
            const t = e.touches[0]
            //   , r = t.pageX
            //   , n = t.pageY
            //   , o = r - this.touchStartX
            //   , a = n - this.touchStartY
            //   , s = this._room.options.canvas.offsetHeight
            //   , l = this._room.options.canvas.offsetWidth;
            const pageX = t.pageX
            const pageY = t.pageY
            const offsetX = pageX - this.touchStartX
            const offsetY = pageY - this.touchStartY
            const canvasHeight = this._room.options.canvas.offsetHeight
            const canvasWidth = this._room.options.canvas.offsetWidth

            let pitch = 2 * offsetY / canvasHeight;
            let yaw = 2 * offsetX / canvasWidth;

            pitch > 1 && (pitch = 1);
            yaw > 1 && (yaw = 1);
/***********************************************************************xst****************************************************************/

            // if(window.initFinished){
            //     let angle = offsetX / offsetWidth * 2 * Math.PI
            //     this._room.actionsHandler.rotate({
            //         type: 'rotate',
            //         angle: angle
            //     });
            // }

            if(window.initFinished){
                // 旋转中
           if(this.rotating) return


           // offset累计
           if(!this.offset) this.offset = 0
           this.offset += offsetX

           // 累计超过6度
           let angle = this.offset / (canvasWidth*10) * (2*Math.PI)
           angle = Math.round(angle / (Math.PI/30)) * (Math.PI/30)
           if(Math.abs(angle) < Math.PI/30) return

           this.rotating = true

           setTimeout(() => {
               // 开始旋转
               this._room.actionsHandler.rotate({
                   type: 'rotate',
                   angle: Math.PI/30 * Math.sign(angle)    // angle
               });

               // 重置累计
               this.offset = 0
               this.rotating = false
           }, 1000/32)
           }

/********************************************************************************************************************************************/           
            
            this.touchStartX = pageX;
            this.touchStartY = pageY;

/***********************************************************************xst****************************************************************/
            // this._room.emit("touchMove", {
            //     pitch: pitch,
            //     yaw: yaw,
            //     event: e
            // })
/********************************************************************************************************************************************/ 
        }
        );
        E(this, "handleTouchEnd", e=>{
            this._room.emit("touchEnd", {
                event: e
            })
        }
        );
        this._room = e,
        this._canvas = e.canvas,
        this.handelResize = this.reiszeChange()
    }
    init() {
        this._canvas.addEventListener("touchstart", this.handleTouchStart),
        this._canvas.addEventListener("touchmove", this.handleTouchMove),
        this._canvas.addEventListener("touchend", this.handleTouchEnd),
        this._room.scene.preventDefaultOnPointerDown = !1,
        this._room.scene.preventDefaultOnPointerUp = !1,
        this._canvas.addEventListener("mousedown", this.handleMouseDown),
        this._canvas.addEventListener("mousemove", this.handleMouseMove),
        this._canvas.addEventListener("mouseup", this.handleMouseUp)
    }
    clear() {
        this._canvas.removeEventListener("touchstart", this.handleTouchStart),
        this._canvas.removeEventListener("touchmove", this.handleTouchMove),
        this._canvas.removeEventListener("touchend", this.handleTouchEnd),
        this._canvas.removeEventListener("mousedown", this.handleMouseDown),
        this._canvas.removeEventListener("mousemove", this.handleMouseMove),
        this._canvas.removeEventListener("mouseup", this.handleMouseUp)
    }
    reiszeChange() {
        window.addEventListener("resize", ()=>{}
        )
    }
}