從HTML5上的不同角度繪製模型<canvas>

Question

那麼這是一個我選擇爲我的計算機圖形類做的項目 - 繪製一個可以從不同角度觀看的大鋼琴。

我還沒有開始工作，我剛剛完成了lynda.com課程HTML5:Graphics and Animation with Canvas。我可以看到人們如何製作一個立方體或一個球，這些簡單的數字。但我不知道應該如何繼續我的項目。一個一個定義每個小表面，肯定會是非常單調乏味的。我應該多學點？ WebGL或其他東西？或者，「乏味」的方式是「好的」方式？你會建議什麼？

Answer 1

「不同的角度」意味着你想建模和渲染一個三維物體。

這裏是一個食譜成功：

• 設計您在任何開源和免費的建模應用程序模型（鋼琴），像Blender

• 然後，學習的Three.js或類似WebGL的基礎知識框架，簡化渲染3D場景的複雜過程

• 從Blender導出模型並將其導入到Three.js JavaScript中。

有可能呈現在three.js所對象<canvas>未使用WebGL，但是使用WebGL的後端simplies過程了很多，我強烈推薦支持WebGL堅持。

Here are is one of Three.js examples showing some modeled cars from different angles (cameras)。

HTML5 Canvas API主要用於2D圖形，並不適合您的目的，因爲您已經注意到它的侷限性。

Answer 2

使用WebGL，Three.js的目標是非常方便。 www.udacity.com有一個關於使用Three.js的3D圖形課程，這對開始非常有用。 實時三維圖形基本上是創建一個2D圖像，重新創建3D角度的效果，並可以實時更新。 以蠻力的方式進行討論並不會告訴你如何達到這種效果。