Learning simple 3D with javascript - or Canvas?

**jeancnicolas** · March 29th, 2012, 07:33 AM

hey guys,

I want to start some basic 3D in HTML5 .. Im moving in from AS3. So Im not sure what's the best approach to simple 3D in the browser. I mean I dont want to do anything insane with webGL etc. I want some nice old skool 3D scrolling to mouse etc.

What I really want to achieve is learn how to plot a couple of straight lines in a 3D space. Not a cube, its more about the basics.

Here is a link to the idea.

Basically - should I be using three.js, canvas, javascript .. or what!? Like I said I dont want mad libs enabling the next chrome experiment. When I look at three.js, all the examples are pretty full on. Where as im trying to find some basics.

whats the word out there?

**MariusJP** · March 29th, 2012, 04:58 PM

Well offcourse you can't "really" create something in 3D but you can create the illusion, just like the link you mentioned. It's all about the vanishing point.. If you have a basic understanding of 3D (like Technical drawning) I think this can help you a lot.
I'm not sure where I would start to be honest, but it's an interesting thought, and seeing how I've been messing with jQuery lately (www.mariusposthumus.nl/canvasFun for example) I'm curious about how this could unfold

**kadaj** · March 30th, 2012, 06:47 AM

Start with canvas. Forget all the js 3D libraries for the moment.

**jeancnicolas** · March 31st, 2012, 06:36 AM

I think thats a good tip kadaj. It's seemed easier working with just plain javascript (coming from from flash), using setInterval as a 'frame rate'.
Getting a particle system going is a great relief - seeing it run smoothly in the browser, as MJ's comment shows.
Still am looking to draw a line with x, y, z co-ords .. so pls post if you know of any examples ..

**MariusJP** · March 31st, 2012, 02:12 PM

Once again, like I said, a real Z doesn't exist on a 2d canvas. But what you can do is create a dotted line (anti alias anyone?) and have it be positioned a bit higher/lower and a bit more to the right/left and have it be a tiny bit smaller. This way you'll create the illusion it's a line going into the -Z but in reality it isn't.