1

绘制和移动模型时如何使用 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 库

所以我想做的是有一个商店物品的模型，并能够在 3d 中平移和环顾它......我仍然不知道如何移动所有东西，但现在我正在询问如何获得z轴在那里...那我会问如何移动画布...

4

2 回答 2

7

如果你想在 Canvas 元素上绘制 3D，你需要使用一种叫做 WebGL 的东西，它基本上是通过调用canvas.getContext('3d');（而不是“2d”）来完成的。这目前在浏览器中的支持有限（谷歌浏览器支持它）。看看一些 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罐1/

但是您所要求的并不是微不足道的，并且需要对 3D 图形投影有基本的了解。您不会得到涉及发布一些代码的答案，您可以简单地复制“n”粘贴。

于 2010-07-30T09:53:32.757 回答
6

Acanvas是二维曲面。您需要将 3D 模型的像素投影到表面上。见http://en.wikipedia.org/wiki/Graphical_projection

于 2010-07-30T03:41:10.127 回答