如何在 Three.js 工作區中圍繞隨機 3d 對象/網格/3d 線的軸旋轉網格組？

Question

我正在嘗試了解更多有關three.js 的信息，以便我可以對一個簡單的機制進行測試。 對於不同的設計，最終所需的輸出將是板傾斜（前視圖）到軸方向（平面圖）。 （XY 圖），但這顯然是第五步或第六步……我被困在第一步，試圖了解如何獲得由小直徑圓柱體表示的旋轉軸。

顯然這張照片代表了失敗。

• 我希望利用 Three.js 中現有的矩陣工具來執行數據圖表/系統分析。
• 不清楚網格對象中的 worldMatrix 對象真正代表什么。 我認為它包含位置、方向和縮放因子，但不清楚如何提取該信息以用於世界空間中其他組件的平移/3d 旋轉。
• 我猜我最好制作原始組件位置和矩陣值的副本，然后處理副本。 當你向左和向后傾斜時，你不會回到原來的地方。

該模型代表一個簡單的滑板。 我想根據用戶選擇的滑塊元素圍繞傾斜軸旋轉前卡車吊架（包含一個軸和兩個輪子）。

沙箱在這里...

 var euler;
 const rotateMeshGroup =( meshGroup, rotationAxis, angleOfRotation) =>{
     euler = new THREE.Euler().setFromRotationMatrix(rotationAxis.matrixWorld);
     meshGroup.children.forEach(item => {
         item.rotateOnAxis(euler, THREE.MathUtils.degToRad(angleOfRotation));
     }) 
 }

我不明白人們如何創建旋轉軸。 我理解的 3D 角度，但是與軸的距離呢？ 那是矩陣叉積計算嗎（到 3D 軸的最短距離，距離垂直於軸？）

編輯：仍在試圖弄清楚這一點。 一直在通過大量的 console.logs 涉水，我在罐頭矩陣中看不到任何有用的東西。 我已將樞軸從小直徑圓柱體網格對象轉換為由兩個矢量端點定義的簡單線。 我現在正在考慮在 RotateMeshGroup 函數中進行 delta-x、delta-y、delta-z 計算（平移、旋轉、平移回來）。

這里有什么提示和提示嗎？

Answer 1

所以，是的，這是一項正在進行的工作。 而我現在已經遠遠不止於此。 對我來說，這是使用 Three.js 進行工程相關分析的學習練習。 我想分享一些我學到的技巧。

1. 我發現這篇文章的答案來自“Q 中的陌生人”代碼是一個旋轉的太陽系，有太陽、地球（有旋轉的月亮和岩石）和火星（有另外兩個行星）。我非常仔細地閱讀了這個例子，理解，真正了解正在發生的一切。 該程序清楚地說明了旋轉是如何傳播給孩子的（月球繞地球旋轉，而地球繞太陽旋轉等等......）內容由 ThreeJS 場景外部的一個簡單對象管理。 該程序使用一些遞歸函數來管理動畫功能中子元素的動作。 需要進行一些更新，例如，THREE.Object3d 的構造函數不再采用名稱。 糾正措施是在對象創建后簡單地添加一個名稱值。 當您准確地命名所有內容時，更容易理解整個子層次結構。 這個例子再次幫助我理解其中的一些東西。

2. 我發現的另一件事是一個來自 BadAskTechie 的回答的帖子回復很簡單，而且直截了當。

    //rotates a mesh's geometry about a specified axis and pivot //the axis is a normalized Vector3 const rotateAbout = (mesh, axis, axisPosition, angle) => { mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(mesh.position.x-axisPosition.x, mesh.position.y-axisPosition.y, mesh.position.z-axisPosition.z)); //translate geometry to axis location mesh.geometry.applyMatrix(new THREE.Matrix4().makeRotationAxis(axis, angle)); //rotate geometry about axis mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(axisPosition.x-mesh.position.x, axisPosition.y-mesh.position.y, axisPosition.z-mesh.position.z)); //translate geometry back to original location }

3. 復雜嵌套 3d 網格的一個技巧。 在 THREE.abcGeometry 對象階段完成所有幾何工作，包括部件的方向/平移/旋轉。 不要創建網格，然后嘗試在場景空間中定位對象。 當您在幾何體中進行平移和旋轉時，當需要制作動畫時，一切都會完美排列。 直到我試過才覺得沒有任何意義。 軸方向似乎都被混淆了。

4. 我發現一種技術很有用。 我想知道在旋轉/動畫功能期間我的元素在 3d 空間中的位置。 我不知道如何在 3d 網格對象上做到這一點。 有太多的頂點沒有用。 相反，我創建了一個簡單的線對象，並在旋轉過程中與組件的其余部分一起操作。 在臨時移動之后，我可以通過檢查它的兩個頂點來查詢該線，創建一個新的 3d vector.normalize() 並在以后的計算中使用它。 這似乎工作得很好。

5. 我在上面提出的問題確實被整個滑板卡車模型問題的大量進展所取代。 上面沙箱中的一些代碼很糟糕。 請不要浪費時間看它。 相反，我認為我要做的是將已完成的項目開源，並在此處列出 github repo 鏈接和演示，以便其他人可以一瞥我的進度。

也許這對其他人學習 ThreeJS 有用。