Как установить ротацию сущностей, используя document.querySelector или другие методы сценария? - PullRequest
Новая
       10

Как установить ротацию сущностей, используя document.querySelector или другие методы сценария?

0 голосов
/ 24 сентября 2018

Я пытаюсь настроить простую демонстрацию физики в виде кадра, которая повторяется при нажатии.Следуя базовым примерам из физической системы aframe и демонстрации оранжевого шутера, я упростил код до приведенного ниже кода, который, кажется, работает нормально, за исключением действия вращения.Блок просто сбрасывает положение, скорость и угловую скорость, но не обновляет вращение, как кажется.Сообщение консоли браузера: Uncaught TypeError: Невозможно прочитать свойство 'set' из неопределенного

Какой самый простой способ установить поворот из этого сценария? 

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <a-scene physics background="color: #ccddff">
      <a-box id="dropped" position="-1 4 -3" rotation="40 45 0" color="#5577D9" dynamic-body></a-box>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="brown" static-body></a-plane>
    </a-scene>
  </body>
   <script>
    window.addEventListener('click', function () {
       // METHOD2 - MOVE THE EXISTING ORANGE
      document.querySelector("#dropped").body.position.set(-1, 4, -3);
      document.querySelector("#dropped").body.velocity.set(0, 0, 0);
      document.querySelector("#dropped").body.angularVelocity.set(0, 0, 0);
      document.querySelector("#dropped").body.rotation.set(40, 45, 0);
    });    
  </script>
</html>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Кажется, что это работает: 

 document.querySelector("#dropped").body.quaternion.set(0.3535533905932738,0.3535533905932738,0.14644660940672624,0.8535533905932737);

Очевидно, что вы должны использовать кватернионы для вращений, когда добавлена ​​физика, похоже, что она перекрывает нативное вращение.Это работает для получения одного из градусов (45,45,0): 

q=new THREE.Quaternion().setFromEuler(new THREE.Euler(THREE.Math.degToRad(45),THREE.Math.degToRad(45),0,'XYZ'));

А затем: 

document.querySelector("#dropped").body.quaternion.set(q.x,q.y,q.z,q.w);

Но ни этого не сработало для меня:

document.querySelector("#dropped").body.quaternion=q
document.querySelector("#dropped").body.quaternion.setFromEuler(e)

Где e - эйлер, а q - кватернион.Также следующие работы, хотя результат не совсем то, что вам нужно: 

document.querySelector("#dropped").body.quaternion=document.querySelector("#dropped").body.initQuaternion;

Возможно, стоит спросить об этом на A-frame github.Надеюсь, что это поможет, счастливое кодирование))

0 голосов
/ 24 сентября 2018

Это document.querySelector("#dropped").components.body.body.position.set(-1, 4, -3);

...