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 library

所以我要做的是拥有一个商品的模型，并能够在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-can-1/

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

Answer 2

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

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

2 个答案: