Используя холст 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 можно использовать в 2dcanvas, например Pre3D library

Итак, я пытаюсь создать модель предмета из магазина и иметь возможность панорамирования и просмотра в 3D ... Я до сих пор не наденуЯ не знаю, как переместить все, но сейчас я спрашиваю, как получить ось Z там ... Тогда я буду просить, как переместить холст ...

Answer 1

Если вы хотите нарисовать 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/

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

Answer 2

A canvas - двумерная поверхность.Вам нужно будет проецировать пиксели ваших трехмерных моделей на поверхность.Смотри http://en.wikipedia.org/wiki/Graphical_projection