Как моделировать струны и их движение для колыбели Ньютона в A-Frame

Question

Я пытаюсь представить Колыбель Ньютона в A-Frame.Я не пытаюсь моделировать реальную физику, просто получаю что-то похожее.Моя проблема - создать нечто, представляющее собой строку, удерживающую шар, и заставить ее анимироваться так же, как мяч (чтобы следовать за ним).

Я попробовал использовать цилиндр (правая сторона) и обнаружил трудностичтобы удерживать верхнюю часть цилиндра на месте с помощью поворотов.

Я пытался использовать ячеистую линию из библиотеки сообщества и столкнулся с трудностями при возможности изменить вторую вершину атрибута пути, чтобы он следовал вместе смяч.

Есть ли какие-либо предложения для того, какой тип объекта я должен использовать, пытаясь это сделать, и как оживить его для достижения желаемого результата?Если вы проверите GH, я также использую компонент aframe-Curve для определения положения шаров, и мне бы хотелось как-нибудь использовать это.

фрагмент ...

        <!-- line for ball -->
        <a-entity meshline="lineWidth: 2; path: -4 1 -10, -4 8.5 -10; color: #999"
                rotation="0 0 0">       
        </a-entity>

        <!-- string for ball -->
        <a-cylinder height="8" radius="0.015" color="white" position="4 5 -10">
            <!--<a-animation property="position" to="7 2.25 -10" dur="1000" delay="4000"></a-animation>
            <a-animation property="rotation" to="0 0 30" dur="1000" delay="4000"></a-animation>-->
        </a-cylinder>

Answer 1

Вам необходимо повернуть цилиндр, чтобы переместить начало анимации к вершине цилиндра, а не к его середине.

Использование компонента анимации (https://github.com/ngokevin/kframe/tree/master/components/animation), который будет поставляться со следующей версиейA-Frame.

Что-то вроде ...

<a-entity animation="property: rotation; from: 0; to: 45; dir: alternate; loop: true">
  <a-entity class="pivot" position="0 -<HALF OF CYLINDER HEIGHT> 0">
    <a-cylinder ...></a-cylinder>
  </a-entity>
</a-entity>