如何在绘制和移动模型时使用z轴?
目前,我的代码中包含以下内容:
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
所以我正在尝试做的是有一个商店项目的模型,并能够在3D中平移和查看它…我仍然不知道如何移动所有东西,但现在我正在询问如何将z轴移动到那里……然后我会问如何移动画布。
发布于 2010-07-30 11:41:10
canvas
是一个二维曲面。您需要将三维模型的像素投影到表面上。请参阅http://en.wikipedia.org/wiki/Graphical_projection
发布于 2010-07-30 17:53:33
如果你想在画布元素上绘制3D,你需要使用WebGL,它基本上是通过调用canvas.getContext('3d');
(而不是'2d')来完成的。这在浏览器中的支持是有限的(Google Chrome支持)。看看http://learningwebgl.com/blog/?cat=5上的一些WebGL教程
可以使用标准的2d Canvas上下文制作基本的3D图形,请查看Opera的Wolfenstein 3D Canvas tutorial http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/
但你所要求的并不是微不足道的,而且需要对3D图形投影有基本的了解。你不会得到一个涉及发布一些你可以简单地复制'n‘粘贴的代码的答案。
https://stackoverflow.com/questions/3368508
复制相似问题