使用帶有z軸的HTML5畫布？以及如何移動畫布視圖？ {請幫幫我我有一個截止日期很快就會結束}

嘿，所有的人，如何在繪製和移動模型時使用z軸？使用帶有z軸的HTML5畫布？以及如何移動畫布視圖？ {請幫幫我我有一個截止日期很快就會結束}

我對目前我的代碼如下：提前

var canvas = { 
    obj: document.querySelector("canvas"), 
    models: [{ 
     start: [10, 10, 10], 
     end: [1, 20, 20], 
     color: "silver", 
    },{ start: [30, 30, 30], 
     end: [10, 1, 10], 
     color: "silver", 
    },{ start: [60, 60, 60], 
     end: [10, 10, 10], 
     color: "silver", 
    }], 
    data: {}, 
    draw: (function() { 
     if (this.obj.getContext) { 
      this.data.ctx = this.obj.getContext('2d'); 
      this.models.forEach(function() { 
       canvas.data.ctx.fillStyle = this.color; 
       canvas.data.ctx.fillRect(this["start"][0], this["start"][1], this["end"][0], this["end"][1]); 
      })); 
     } 
     return this 
    }) 
}.draw()

謝謝...

我知道3D可以在2D畫布中使用，這裏是你們只是一個例子： Pre3D library

所以我想要做的是有一個商店項目的模型，並能夠在三維平移和環視...我仍然不知道如何移動一切，但現在我是要求如何在那裏獲得z軸...然後iw生病問如何移動畫布...

P.S：更小的代碼是更快地加載和閱讀......

{Please Help me I have a deadline that ends very soon}

來源

2010-07-30 JamesM-SiteGen

我還希望讓用戶將其拖動到周圍.. – 2010-07-30 03:21:19

畫布中沒有z軸。你想達到什麼目的？ – recursive 2010-07-30 03:25:22

注意您正在使用'canvas.getContext（'2d'）;'不'3d'。有一些關於3D的討論，但我不認爲很多或者任何瀏覽器都支持它。 – qw3n 2010-07-30 03:40:17

一個canvas是一個二維表面。您需要將三維模型的像素投射到曲面上。請參閱http://en.wikipedia.org/wiki/Graphical_projection

來源

2010-07-30 03:41:10 harto

好吧，我將使用什麼代碼來平移和繞過模型？ – 2010-07-30 04:56:29

我已經找到了在2D畫布上創建3D的框架，並且在那裏看起來並不是很多。你可以嘗試看看這個傢伙的工作http://ajaxian.com/archives/canvas-in-3d – Castrohenge 2010-07-30 08:33:06

啊，是的，這是一個很好的例子..忘了所有關於該鏈接..（我甚至沒有認爲我已經看到這個評論，直到現在） – 2011-07-13 08:59:33

如果要將3D繪製到Canvas元素上，則需要使用名爲WebGL的東西，這基本上是通過調用canvas.getContext('3d');（而不是'2d'）完成的。這在瀏覽器中的支持有限（Google Chrome支持它）。看看一些WebGL的教程http://learningwebgl.com/blog/?cat=5

這是可以做到基本的3D圖形與標準的2D畫布背景下，看看Opera的德軍總部3D畫布教程http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

但是你問」不是個東西不重要，而且需要對3D圖形投影有基本的瞭解。你不會得到一個答案，涉及發佈一些代碼，你可以簡單地複製'n'粘貼。

來源

2010-07-30 09:53:32

謝謝，但是，我知道有一種方式與canvas.getContext（'2d'）;因爲我已經看到它的工作和移動，它的所有JavaScript重繪/編輯畫布的每一個動作你.. – 2010-07-31 08:05:17

@JamesM如果你已經看到它的工作，然後用它作爲你的例子。這不像你無法下載代碼並查看它。 – 2010-07-31 16:43:19

使用帶有z軸的HTML5畫布？以及如何移動畫布視圖？ {請幫幫我我有一個截止日期很快就會結束}

回答

相關問題