Making a scene static and a 3D element inside of scene rotating on drag

Frame and I am trying to make a 3D element where the background(scene) is always fixed, so I don't have that 360deg viewport. I want that 3D element inside of scene to always be in the center of viewport and that it can rotate on drag for 360deg and always stays in the center of viewport

This is the code I have so far, but I can still drag around scene in 360deg and 3D element is not rotatable when dragged

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- Static Blue Background -->
      <a-sky color="#4CC3D9"></a-sky>
      
      <!-- Rotatable 3D Element -->
      <a-entity
        geometry="primitive: box"
        material="color: #FFC65D"
        position="0 1.5 -3"
        rotation="0 0 0"
        drag-rotate-component
      ></a-entity>
    </a-scene>
  </body>
</html>

Solution

You need to register drag-rotate-component before using it on your box. Example of a drag-rotate-component:

AFRAME.registerComponent('drag-rotate-component',{
  schema : { speed : {default:1}},
  init : function(){
    this.ifMouseDown = false;
    this.x_cord = 0;
    this.y_cord = 0;
    document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
    document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
    document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
  },
  OnDocumentMouseDown : function(event){
    this.ifMouseDown = true;
    this.x_cord = event.clientX;
    this.y_cord = event.clientY;
  },
  OnDocumentMouseUp : function(){
    this.ifMouseDown = false;
  },
  OnDocumentMouseMove : function(event)
  {
    if(this.ifMouseDown)
    {
      var temp_x = event.clientX-this.x_cord;
      var temp_y = event.clientY-this.y_cord;
      if(Math.abs(temp_y)<Math.abs(temp_x))
      {
        this.el.object3D.rotateY(temp_x*this.data.speed/1000);
      }
      else
      {
        this.el.object3D.rotateX(temp_y*this.data.speed/1000);
      }
      this.x_cord = event.clientX;
      this.y_cord = event.clientY;
    }
  }
});

Then also disable the default look controls so you're only moving the box without looking around

<a-camera look-controls="enabled:false"></a-camera>

How to register component: https://aframe.io/docs/1.4.0/core/component.html#aframe-registercomponent-name-definition

Example based on https://stackoverflow.com/a/42105892/13365797