tizzle/aframe-orbit-controls-component

I can't load the component dynamically

Closed this issue · 5 comments

andreiciungan commented

I would like to enable the orbit-controls component only when I click on a 3D object, but if I use setAttribute ‘orbital-controls’ on camera, the component is not working. The component it works if I add it on camera from the beginning, but I can’t set it disable and to activate it only when I click on an object. Can you help me please with a solution? Thank you!

tizzle commented

Can you have a look at this implementation, if it suits your needs?

<html>

<head>
  <title>A-Frame Example Component - Enable Later</title>
  <script src="../build.js"></script>
</head>

<body>
  <div id="aframe">
    <a-scene id="a-scene">
      <a-entity
        id="camera"
        camera="fov: 80; zoom: 1;"
        position="0 2 5"
        orbit-controls="
          invertZoom: true;
          autoRotate: false;
          target: #sphere;
          enableDamping: true;
          dampingFactor: 0.125;
          rotateSpeed:0.25;
          minDistance:3;
          maxDistance:100;
        "
        mouse-cursor=""
      >
        <a-entity geometry="primitive:cone; radius-bottom:1; radius-top:0" scale=".33 1 .33" position="0 0 0" rotation="90 0 0" material="color: #0099ff; transparent: true; opacity:0.5"></a-entity>
      </a-entity>

      <a-entity id="target">
        <a-box id="box" position="-1 0.5 1" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-sphere id="sphere" position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cylinder id="cylinder" position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      </a-entity>
      <a-sky color="#ECECEC"></a-sky>

    </a-scene>
  </div>

  <div style="position:absolute; top:0; left:0; padding:12px;">
    <button id="enableOrbitControls">Enable Orbit Controls</button>
  </div>

  <script>

    document.addEventListener("DOMContentLoaded", function(event) {
      var scene = document.querySelector('a-scene');
      if (scene.hasLoaded) addEventListeners();
      else scene.addEventListener('loaded', handleSceneLoaded);
    });

    function handleSceneLoaded() {
      document.querySelector('#camera').setAttribute( 'orbit-controls', 'enabled', false);
      document.querySelector('#enableOrbitControls').addEventListener('click', handleEnableOrbitControls);
    }

    function handleEnableOrbitControls(event) {
      var cam1 = document.querySelector('#camera');
      document.querySelector('#camera').setAttribute( 'orbit-controls', 'enabled', true);
    }
  </script>

</body>

</html>
andreiciungan commented

@tizzle For some reason, if I don't set "enabled" flag or even if I set it false, it looks like the orbit controls is enabled. I think that would be perfect if "enabled: false" will work, because I could update the target and the "enabled" flag.

tizzle commented

Ahh, sorry.

i made an error pasting it. I also can confirm that setting the orbitControls to enabled:false in the tag doesn't do a thing. I will have to look into that.

Can you please have a look at the edited version above? I added this line:

document.querySelector('#camera').setAttribute( 'orbit-controls', 'enabled', false);

to the handleSceneLoaded listener. Can you try if this works for you?

tizzle commented

Hey @andreiciungan,

i was able to find the code where the problem was stemming from and i think i have a fix for it. I have to check some other use cases though, but i'm confident i can publish a patch this week.

Nevertheless, there is one tiny problem: You're might run into trouble when only using one camera. By switching on the orbit controls the camera might jump from it's original position (as defined on the camera tag) to the values from the orbitControls attribute.

To avoid this, you'd have to make sure to line up the camera position with the position the camera will have when enabling the orbit-controls.

I made a branch where i 'fixed' the enabled props and added a new example to illustrate the behaviour: https://github.com/tizzle/aframe-orbit-controls-component/tree/enabled-fix

Hope this helps.

andreiciungan commented

It works! Thank you very much!