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

Question

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>

If your entire experience is to create a rotatable 3D element in the centre without any other features from a-frame, consider https://modelviewer.dev/. Create a `glb` file, and model viewer takes care of the rest. — jjj, Mar 16 '23 at 10:55

jjj · Accepted Answer · 2023-03-16T10:52:41.413

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

Thanks a lot, it works exactly as I wanted it! – Stefan Mar 16 '23 at 11:14 — Stefan, Mar 16 '23 at 11:14

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

1 Answers1