2

I'm not a beginner per se to programming (like C++ or Java) but I am a beginner to JavaScript and three.js. I want to learn three.js for a project I want to work on but I have no idea where to begin. I tried just diving into the source code on github but a lot of it can be confusing at times especially for someone new to JavaScript. I was wondering if there are any tutorials, videos, books, websites, etc... that go over the basics of three.js library?

Euridice01
  • 2,422
  • 7
  • 37
  • 61
  • See http://stackoverflow.com/questions/11966779/should-i-start-learning-webgl-or-use-three-js/11970687#11970687 – WestLangley Mar 04 '13 at 00:05
  • Warning: Three.js tutorials online are notoriously out-of-date. – WestLangley Mar 04 '13 at 00:46
  • So essentially, the only way to learn three.js is through the examples on github? – Euridice01 Mar 04 '13 at 01:31
  • I'm still trying to figure out how can I create nametags on specific structures loaded in a 3-D viewer and even though, I'm using the new version, it's still giving me errors. – Euridice01 Mar 04 '13 at 01:42
  • Everyone has a different way of learning. Just remember that the most up-to-date examples are official three.js examples. – WestLangley Mar 04 '13 at 01:44
  • I have recently updated my GitHub page of examples to version 56 (current as of March 2013). And the examples there are meant to explore many of the features from a basic standpoint. http://stemkoski.github.com/Three.js/ – Lee Stemkoski Mar 12 '13 at 22:10
  • @LeeStemkoski, Thank you so much. It's an honor to have you comment! I'm actually looking at your Mouse ToolTip and Text Texture example as a way to create a label to place on the 3D structure. I saw you have commented on another user's post regarding that and it's really helping me out. I especially love your annotations/comments on your code. Thank you! – Euridice01 Mar 13 '13 at 23:42
  • Happy to be of assistance -- it's what StackOverflow is all about. Although nothing says "thank you" quite so well as upvotes :) – Lee Stemkoski Mar 14 '13 at 14:42

3 Answers3

3

try googling and i believe you will find many :) try this http://www.aerotwist.com/tutorials/getting-started-with-three-js/

Singleton
  • 3,565
  • 3
  • 22
  • 36
  • I particularly like the example provided above but there are only 6 tutorials on certain things you want to do with it but not like a beginner's let's go through the code and understand object's roles, how to use several other libraries and js files, etc.. – Euridice01 Mar 03 '13 at 19:37
3

When you download Three.js they have an awful lot of examples. Why not use those? There are almost 200 of them.

Regarding looking at the source code, I know how you feel, javascript is quirky and there are no really well-established ways of doing something as simple as inheritance. However, I have to say that Three.js is very, very well written and easy to understand, if there's any time to see how javascript gurus write good javascript, Three.js is it. It's very well laid out, not too much indirection, objects are well abstracted, the hierarchies make good sense and methods do what they sound like they do, not too much, not too little.

I suggest start by splitting up your project, adapting the closest example that does what that part of your project will do. By the time you've done 3 or 4 aspects, you'll have a great feel for it and can build up your project by looking for an example that resembles each problem you face.

However, 3D programming is not simple. So you're going to be on a doubly steep learning curve. The problem I've found with 3D programming in Three.js (as with other 3D javascript libraries), as opposed to regular javascript programming, is there's very little feedback regarding errors. So it's very hard to know what's going wrong. You'll need to get used to debugging javascript. If your progress is like mine, you'll end up having to refine individual problems into small demonstrable snippets which you can ask for help on stack exchange. Isolate the problem and paste it into a jsfiddle. The most common bugs result from subtle properties that need to be configured, for example, if you draw a circle, you'd expect it to display no matter which side is being viewed, but that is not the case! However a quick question on stack overflow in those situations will help.

CL22
  • 13,696
  • 23
  • 83
  • 147
  • I suppose you might be right. I guess the most confusing thing for me is inheritance, function calls, what objects to use, how to create superclasses, etc.. In which case, am I just better off learning JavaScript first? – Euridice01 Mar 03 '13 at 19:39
  • There's no harm in giving it a go. If you run into a problem and don't even know what question to ask, then you probably need to step back down a level and ask questions pertaining to the javascript language itself so you have an understanding of at least what the syntax you're looking at is doing. But you can get an awful lot done by just manipulating one of the great many examples that come with Three.js. They demonstrate which objects to use. You'll rarely need to make super classes or subclasses. Besides, in javascript, strictly speaking there are no classes! – CL22 Mar 03 '13 at 19:43
3

There are some excellent beginner tutorials on YouTube: Three.js - YouTube

A guy named Nikita Severinov made some really nice introduction series, but they are unfortunately only in Russian:

WebGL Three.js - Solar System Tutorial Series

Hope that helps at least a tiny bit.

maringtr
  • 338
  • 3
  • 11
  • Out of curiosity, is there an online translator for videos? So that I can get subtitles on these Russian tutorials? – Euridice01 Mar 03 '13 at 21:51