HTML5畫布 - 線框球體在2D

我期待繪製2D畫布3D線框球體。我不是一個數學忍者，所以我想知道是否有人知道一個簡單的方法，使用線路弧連接在畫布中繪製一個並繪製：數學：HTML5畫布 - 線框球體在2D

我希望得到任何幫助。

我希望這是一個簡單的等式，但如果你知道這是不是（即繪圖，這將是一個很大的代碼），我希望知道，作爲以及我可能需要重新考慮我想要做的事情。

2012-04-05 Agent Goon

是否需要一個二維的畫布？我不能想辦法把我的頭畫，使用了lineTo弧，因爲你需要做矩陣乘法，以繞Y軸圓的頂部。使用3D畫布上下文會很容易。 – 2012-04-05 20:50:55

它不應太硬給出）的函數的從球形座標XYZ轉換和b）的功能，從XYZ執行投影到2D。這兩個都存在於Web上。 – Phrogz 2012-04-05 21:01:41

你應該只畫了很多這些線來創建一個完整的球體。這是一個很好的起點，給我5分鐘，我會看看我是否可以改進它來繪製一個球體。

好吧，這就是高清了我的能力。但是，這裏還有一點改進：http://jsfiddle.net/aJMBp/2/

2012-04-05 22:37:57 Saturnix

+1非常酷的東西！ – 2012-04-05 22:48:54

是啊，在做這個，但我主要是吸在它的數學部分！我希望有人比我們更瞭解3D數學，他們可以利用這個繪圖核心並編寫循環。然而，我正在嘗試這個... – Saturnix 2012-04-05 22:51:59

這可能是要走的路，只是球體的曲線不是拋物線。所以使用二次曲線不會讓你感覺到任何地方。 – 2012-04-29 18:30:09

最簡單的方法是查看SVG文件的源代碼（here）並使用canvas命令重新創建這些路徑。

如果你想要一個實際的3D球體，投影到二維空間，我建議使用庫像three.js所

您也可以看一些數學我在這裏所做的：swarms 的_3d和矩陣模塊應該是你需要的。

2012-04-05 23:07:24 david

羣集是一個恆星演示。感謝分享！ – Phrogz 2012-04-06 02:01:01

神聖的廢話，@大衛，這是一個令人難以置信的帆布小提琴。可能是我最近看到的最令人印象深刻的小提琴。它甚至在我的iPad上運行（有點慢，這是一個給定的，但它的工作原理！）。你有一個網站嗎？ – 2012-04-29 18:05:24

這次沒有幫助我，所以我幫助自己，這裏是：純HTML5 + JavaScript可配置渲染或線框球體。

我從這個excellent post開始，然後繼續。基本上我從Qt3D收集了一些頂點生成代碼，並且適用於JS。

我不是100％確定旋轉函數是正確的，但是如果您發現錯誤，歡迎您回饋。

更清晰，我一直尊敬的Z軸位置，繪製白色正面和灰色的背。

這裏的結果（16環×32片）及相關jsFiddle link

Enjoy

2017-03-10 19:04:32

回答