02.각 모터 제어

앞서 THREE.js를 활용하여 컨트롤 인터페이스를 구성한다고 했다. 로봇팔이니만큼 각도제어에 매우 유의해야하는데 시행착오를 겪으면서 정리를 했다.

• 지오메트리와 메시의 위치관계

1. 메시는 지오메트리를 기반으로 이루어진다. 메시를 이동하는 것은 position, 지오메트리를 이동하는 것은 translate이다.
2. 우리가 보는 진짜 위치는 메시의 포지션 + 지오메트리의 트랜스레잇이라고 할 수 있다.
3. 여기까지는 순조로웠다.

• 오일러 각과 회전

1. 여기가 진짜다.
2. 회전은 메시의 포지션을 중심으로 움직인다.
3. 지오메트리가 센터에 있으면 그 물체의 자체의 중심에서 돌아간다.
4. 지오메트리에 변환을 주면 멀리 떨어져있는 점을 중심으로 행성이 돌듯이 돈다.
5. 회전은 오일러 각으로 움직인다.
6. 드론할 때 많이 썼던 roll pitch yaw를 기반으로 움직이며 순서가 중요하다. 그래서 rotation.set(roll,pitch,yaw,order) 오더가 있다.

일단 모두 배열은 해놓았고 모터각에따라서 포지션과 회전으로 마치 로봇팔이 움직이는 것 같은 착각을 불러일으키려고 한다.

긴 시행착오를 거치고 결국 완성을 했다.

HTML로 range input을 추가하여 각 모터의 움직임을 입력으로 받는다. 혹시 모르니 min max는 +-130도로 정했다.

각 모터를 input range로 컨트롤

저번에 진행했던 것을 계속 진행해서 조합을 맞추고 input range를 넣어 range를 조절하면 gui로 바뀌는 구조를 만들었다. python에 flask로 구동된다.

이번에는 현재의 자세를 저장하고 블록형태로 만들어 불러올 수 있도록 업데이트 하려고한다.

자바스크립트와 파이썬의 플라스크간 통신은 ajax를 사용했다. 간단하게 구현해봤다.

디자인 없는 프론트엔드

모터를 컨트롤해서 CreateBlock을 클릭하면 블록이 생성되고 블록들은 앞뒤로 움직일 수 있으며 저장과 불러오기가 가능하고 각 블록별 삭제가 가능하다.