使用带有z轴的HTML5画布？以及如何移动画布眼睛视图？

Question

在绘制和移动模型时如何使用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轴那里...然后我会问如何移动画布......

Answer 1

如果你想在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-可以-1 /

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

Answer 2

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