背景
在網頁上同步實時根據機械臂上傳上的數據進行機械臂模型運動。在網頁上運行借助於threeJS來進行實現。
運動核心內容學習參考網址：https://www.cnblogs.com/zhnblog/p/6882683.html。
本文章實現效果是六軸機械臂通過數據來進行實時運動的數字孿生。
實現
一定要看這個網址https://www.cnblogs.com/zhnblog/p/6882683.html。
這個是六軸機械臂動實現的核心，這個不明白，直接是白扯。
數據
首先需要知道機械臂上傳的數據是什么樣式的。以及我們需要的是什么數據。
機械臂上傳上來有一個角度數據。
原始數據：J1=-8.4041 J2=-42.1708 J3=-97.5343 J4=0 J5=-40.3 J6=-8.4078
處理成json數據：{'J1': 5.2541, 'J2': -47.5479, 'J3': -96.0937, 'J4': 0.0, 'J5': -36.36, 'J6': 5.2578}
原點數據：J1=0 J2=0 J3=-90 J4=0 J5=-90 J6=0
這里J1、J2...6分別代表的旋轉多少度，正負分別代表順時針和逆時針旋轉（這里說一下，本案例上來的正負正好號數學中代表的含義相反，所以在案例中-(J1)進行了轉換）。接觸的機械臂僅限這一台，不知道其他的是否存在了這種現象。
模型
這里我們看上一步的原點數據可知，其實原點數據也不是初始0,這樣我們就確定了模型的初始形態是一柱擎天的
運動
這里我們給每個關節都套了一個盒子，來對盒子進行挪動，(這里具體就不說了，你看完前邊提的文章就知道了)。
我們知道要機械臂運動起來是控制他的旋轉，而且每個關節點上只圍繞着x,y,z某一條軸進行運動。這不久和上傳上的數據對起來了嘛。
這里還有一個細節就是，上傳上來的數據是角度，而我們對模型旋轉設置填寫的參數是弧度。
這里threeJS提供了角度轉弧度的方法
THREE.MathUtils.degToRad(-(J3));
知識點參考網址：https://webgl.blog.csdn.net/article/details/87863243。
以上呢，我們就實現了數據運動。
但是在實際運動效果來看，因為傳輸上來的點位與點位距離過大，感覺運動是卡幀跳動情況。
解決這個問題我們用到了Tween.js ，來為兩點直接做補間動畫
let BRBOX =scene.getObjectByName ("bottomRotateBox")//關節軸
let radJ1=THREE.MathUtils.degToRad(-(J1));
new TWEEN.Tween(BRBOX.rotation).to({ y: radJ1 }, 1900).start();
Tween.js參考學習網址：
https://www.xdnote.com/tweenjs/
https://blog.csdn.net/youlinhuanyan/article/details/104436252
這個里有作者使用的案例：https://blog.csdn.net/ithanmang/article/details/82344171
tweenjs文件備份地址
https://blog-static.cnblogs.com/files/enhengenhengNymph/Tween.js