使用带有 z 轴的 HTML5 画布？以及如何移动画布的视线？
绘制和移动模型时如何使用 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 库< /a>
所以我想做的是拥有一个商店物品的模型，并且能够以 3D 方式平移并查看它周围...我仍然不知道如何移动所有东西，但现在我想知道如何移动在那里得到z轴...然后我会问如何移动画布...
How do you use the z axis when drawing and moving a model?
I have the following in my code currently:
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()
I know 3d can be used in the 2d canvas, for example Pre3D library
So what I am trying to do is have a model of a shop item and be able to pan and look around it in 3d... I still don't know how to move everything but for now I am asking for how to get the z axis there... Then I will ask for how to move the canvas...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您想在 Canvas 元素上绘制 3D 效果，则需要使用称为 WebGL 的东西，这基本上是通过调用
canvas.getContext('3d');（而不是 '2d'）来完成的。目前浏览器对此的支持有限（Google Chrome 支持）。查看一些 WebGL 教程 http://learningwebgl.com/blog/?cat=5可以使用标准 2d Canvas 上下文制作基本的 3D 图形，请查看 Opera 的 Wolfenstein 3D Canvas 教程 http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1 /
但是您所要求的并不是微不足道的，并且需要对 3D 图形投影有基本的了解。您不会得到涉及发布一些您可以简单地复制“n”粘贴的代码的答案。
If you want to draw 3D onto the Canvas element, you'll need to use something called WebGL which is basically done by calling
canvas.getContext('3d');(instead of '2d'). This has limited support in browsers right now (Google Chrome supports it). Have a look at some WebGL Tutorials http://learningwebgl.com/blog/?cat=5It is possible to do basic 3D graphics with a standard 2d Canvas context, have a look at Opera's Wolfenstein 3D Canvas tutorial http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/
But what you're asking for isn't trivial, and requires basic understanding of 3D graphics projection. You're not going to get an answer that involves posting some blob of code that you can simply copy 'n' paste.
canvas是一个二维表面。您需要将三维模型的像素投影到表面上。请参阅http://en.wikipedia.org/wiki/Graphical_projectionA
canvasis a two-dimensional surface. You would need to project the pixels of your three-dimensional models onto the surface. See http://en.wikipedia.org/wiki/Graphical_projection