Используя холст HTML5 с осью Z? А как на холсте сдвинуть глаза?

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 это двумерная поверхность. Вам нужно будет проецировать пиксели ваших трехмерных моделей на поверхность. Смотрите http://en.wikipedia.org/wiki/Graphical_projection

Answer 2

Если вы хотите нарисовать 3D на элементе Canvas, вам нужно использовать что-то под названием WebGL, что в основном делается путем вызова canvas.getContext('3d'); (вместо "2d"). Это имеет ограниченную поддержку в браузерах прямо сейчас (Google Chrome поддерживает это). Ознакомьтесь с некоторыми учебными пособиями по WebGL http://learningwebgl.com/blog/?cat=5

Можно сделать базовую трехмерную графику со стандартным контекстом 2d Canvas, посмотрите учебник Opera Wolfenstein 3D Canvas http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

Но то, что вы просите, не тривиально и требует базового понимания проекции трехмерной графики. Вы не получите ответ, который включает в себя публикацию некоторого куска кода, который вы можете просто скопировать и вставить.