使用带有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画布？以及如何移动画布视图？ {请帮帮我我有一个截止日期很快就会结束}

回答

相关问题