I am currently in the process of converting the code from into an AFRAME component.

Everything works fine when the initial rotation is '0 0 0', but I am now attempting to set a different initial rotation.

Thanks to @Piotr, who created a fiddle for me

Essentially, my goal is to define that initial rotation and then have the object rotate on click and drag using the remaining function.

AFRAME.registerComponent('drag-rotate',{
    schema : { 
      mouseSpeed : {default:1},
      touchSpeed : {default:2},
      rotation   : {type: 'vec3'},
      disabled: {default: false}
    },
    windowHalfX: window.innerWidth / 2,
    windowHalfY: window.innerHeight / 2,
    targetRotationX:0,
    targetRotationOnMouseDownX:0,
    targetRotationY:0,
    targetRotationOnMouseDownY: 0,
    mouseX:0,
    mouseXOnMouseDown:0,
    mouseY: 0,
    mouseYOnMouseDown: 0,
    init : function(){
      this.ifMouseDown = false
      document.addEventListener('touchstart',this.onTouchStart.bind(this))
      document.addEventListener('touchend',this.onTouchEnd.bind(this))
      document.addEventListener('touchmove',this.onTouchMove.bind(this))
      document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this))
      window.addEventListener( 'resize', this.onWindowResize.bind(this) )
    },
    update: function (oldData) {
      if(!AFRAME.utils.deepEqual(oldData.rotation, this.data.rotation)){
        this.el.setAttribute('rotation',  this.data.rotation)
        this._targetRotation = this.el.object3D.rotation.clone()
        this.targetRotationX = this._targetRotation.x
        this.targetRotationY = this._targetRotation.y
      }
    },
    remove: function() {
      
      document.removeEventListener('touchstart',this.onTouchStart.bind(this))
      document.removeEventListener('mousedown',this.OnDocumentMouseDown.bind(this))
      window.removeEventListener( 'resize', this.onWindowResize.bind(this))
    },
    onWindowResize: function () {
      this.windowHalfX = window.innerWidth / 2
      this.windowHalfY = window.innerHeight / 2
    },
    OnDocumentMouseDown : function(event){

      this.ifMouseDown = ['A-SCENE', 'CANVAS'].includes(event.target?.tagName)

      if(this.ifMouseDown){
        document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this))
        document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this))
        this.mouseXOnMouseDown = event.clientX - this.windowHalfX
        this.targetRotationOnMouseDownX = this.targetRotationX

        this.mouseYOnMouseDown = event.clientY - this.windowHalfY
        this.targetRotationOnMouseDownY = this.targetRotationY
      }

    },
    OnDocumentMouseUp : function(){
      this.ifMouseDown = false
      document.removeEventListener('mouseup',this.OnDocumentMouseUp.bind(this))
      document.removeEventListener('mousemove',this.OnDocumentMouseMove.bind(this))
    },
    OnDocumentMouseMove : function(event)
    {
      if(this.ifMouseDown){
        this.mouseX = event.clientX - this.windowHalfX;
        this.mouseY = event.clientY - this.windowHalfY;

        this.targetRotationY = this.targetRotationOnMouseDownY + (this.mouseY - this.mouseYOnMouseDown) * this.data.mouseSpeed/1000
        this.targetRotationX = this.targetRotationOnMouseDownX + (this.mouseX - this.mouseXOnMouseDown) * this.data.mouseSpeed/1000
      }
    },
    onTouchStart: function(event){  

      if (event.touches.length == 1) {
        this.ifMouseDown = ['A-SCENE', 'CANVAS'].includes(event.target?.tagName)
        this.x_cord = event.touches[ 0 ].pageX
        this.y_cord = event.touches[ 0 ].pageY

        document.addEventListener('touchend',this.onTouchEnd.bind(this))
        document.addEventListener('touchmove',this.onTouchMove.bind(this))
        this.mouseXOnMouseDown = event.touches[ 0 ].pageX - this.windowHalfX
        this.targetRotationOnMouseDownX = this.targetRotationX
        this.mouseYOnMouseDown = event.touches[ 0 ].pageX - this.windowHalfY
        this.targetRotationOnMouseDownY = this.targetRotationY

      }
    },
    onTouchMove: function(event){
      if(this.ifMouseDown){
        this.mouseX = event.touches[ 0 ].pageX - this.windowHalfX;
        this.mouseY = event.touches[ 0 ].pageY - this.windowHalfY;

        this.targetRotationY = this.targetRotationOnMouseDownY + (this.mouseY - this.mouseYOnMouseDown) * this.data.touchSpeed/1000
        this.targetRotationX = this.targetRotationOnMouseDownX + (this.mouseX - this.mouseXOnMouseDown) * this.data.touchSpeed/1000
      }  
    },
    onTouchEnd: function(event){
      document.removeEventListener('touchend',this.onTouchEnd.bind(this))
      document.removeEventListener('touchmove',this.onTouchMove.bind(this))
      this.ifMouseDown = false
    },
    tick: function(){

      if(this.data.disabled)
        return
 
     this.el.object3D.rotation.y += ( this.targetRotationX - this.el.object3D.rotation.y ) * 0.1

     this.finalRotationY = (this.targetRotationY - this.el.object3D.rotation.x)
    
     if (this.el.object3D.rotation.x  <= 1 && this.el.object3D.rotation.x >= -1 ) 
      this.el.object3D.rotation.x += this.finalRotationY * 0.1
        
     if (this.el.object3D.rotation.x  > 1 ) 
      this.el.object3D.rotation.x = 1
        
     if (this.el.object3D.rotation.x  < -1 ) 
      this.el.object3D.rotation.x = -1
      
    },
  });

The angle I initially established with AFRAME in the update function differs from the one set here – specifically, when this component is disabled

https://i.sstatic.net/qnEBI.png

With it enabled

https://i.sstatic.net/BIuXZ.png

If I zero these values as in the example code, then the rotation becomes '0 0 0' and functions normally.

    this.el.setAttribute('rotation',  this.data.rotation)
    this._targetRotation = this.el.object3D.rotation.clone()
    this.targetRotationX = 0
    this.targetRotationY = 0