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()

Pre3Dライブラリなどの2Dキャンバスで3Dを使用できることは知っています。

だから私がやろうとしているのは、ショップアイテムのモデルを持っていて、それを3Dでパンして見回せるようにすることです...私はまだすべてを移動する方法がわかりませんが、今のところ私はそこにz軸があります...次に、キャンバスを移動する方法を尋ねます...

4

2 に答える 2

7

Canvas 要素に 3D を描画する場合は、WebGL と呼ばれるものを使用する必要があります。これは、基本的にcanvas.getContext('3d');(「2d」ではなく) 呼び出しによって行われます。現在、これはブラウザーでのサポートが制限されています (Google Chrome でサポートされています)。いくつかの WebGL チュートリアルをご覧ください http://learningwebgl.com/blog/?cat=5

標準の 2d キャンバス コンテキストで基本的な 3D グラフィックスを作成することができます。Opera の Wolfenstein 3D キャンバス チュートリアルhttp://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html- 5缶1/

しかし、あなたが求めていることは些細なことではなく、3D グラフィックス プロジェクションの基本的な理解が必要です。単純にコピーして貼り付けることができるコードの塊を投稿することを含む答えは得られません。

于 2010-07-30T09:53:32.757 に答える
6

Acanvasは 2 次元の曲面です。3 次元モデルのピクセルをサーフェスに投影する必要があります。http://en.wikipedia.org/wiki/Graphical_projectionを参照してください

于 2010-07-30T03:41:10.127 に答える