0

How do you use the z axis when drawing and moving a model?

I have the following in my code currently:

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

I know 3d can be used in the 2d canvas, for example Pre3D library

So what I am trying to do is have a model of a shop item and be able to pan and look around it in 3d... I still don't know how to move everything but for now I am asking for how to get the z axis there... Then I will ask for how to move the canvas...

3
  • I also want to have the user drag it arround.. Jul 30, 2010 at 3:21
  • There is no z axis in a canvas. What are you trying to accomplish?
    – recursive
    Jul 30, 2010 at 3:25
  • notice your are using canvas.getContext('2d'); not '3d'. There is some talk about 3d but I don't think many or maybe any browsers support it.
    – qw3n
    Jul 30, 2010 at 3:40

2 Answers 2

6

If you want to draw 3D onto the Canvas element, you'll need to use something called WebGL which is basically done by calling canvas.getContext('3d'); (instead of '2d'). This has limited support in browsers right now (Google Chrome supports it). Have a look at some WebGL Tutorials http://learningwebgl.com/blog/?cat=5

It is possible to do basic 3D graphics with a standard 2d Canvas context, have a look at Opera's Wolfenstein 3D Canvas tutorial http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

But what you're asking for isn't trivial, and requires basic understanding of 3D graphics projection. You're not going to get an answer that involves posting some blob of code that you can simply copy 'n' paste.

2
  • thanks but, i know that there is a way with canvas.getContext('2d'); because i have seen it working and moving, its all javascript redrawing/edit the canvas every move you make.. Jul 31, 2010 at 8:05
  • @JamesM if you've seen it working, then use that as your example. It's not like you can't download the code and look at it.
    – Rex M
    Jul 31, 2010 at 16:43
5

A canvas is a two-dimensional surface. You would need to project the pixels of your three-dimensional models onto the surface. See http://en.wikipedia.org/wiki/Graphical_projection

3
  • okay well, what code would i use to pan and go around the model with? Jul 30, 2010 at 4:56
  • I've had a look for frameworks to create 3d on a 2d canvas and there doesn't appear to be a huge amount out there. You could try taking a look at this guys work ajaxian.com/archives/canvas-in-3d Jul 30, 2010 at 8:33
  • Ah, yes, that is a great example.. Forgot all about that link.. ( I don't even think I've seen this comment until now ) Jul 13, 2011 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.