Results 1 to 5 of 5

Thread: Learning simple 3D with javascript - or Canvas?

  1. #1

    Learning simple 3D with javascript - or Canvas?

    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?

  2. #2
    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
    As3 / JS/jQuery / HTML5 / CSS(3) / PHP (intermediate)

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

  4. #4
    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 ..

  5. #5
    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.
    As3 / JS/jQuery / HTML5 / CSS(3) / PHP (intermediate)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012