What's the best way to get familiar with Three.js ecosystem?

learning-resources

#1

I was mostly working on React and ClojureScript in the past years. We have Redux and immutable data structure for states manaments, we have React Components for reusing UI, and quite some theories and libraries for learning. Plus many news sources around the community sharing new practices on React and JavaScript.

What’s that for Three.js?


#2
  1. threejs.org/docs - documentation

  2. threejs.org/examples - examples

  3. github.com/mrdoob/three.js - sourcecode

  4. threejs.org/editor/ - scene creation, testing, import/export, materials …

  5. discourse.threejs.org - quick help and guide

  6. stackoverflow.com/questions/tagged/three.js - quick help and guide

  7. threejs.slack.com - quick help and guide

  8. #three.js - twitter

  9. threejs.org/docs/index.html#manual/introduction/Useful-links – for additional resources


#3

how to join Slack. Any invitations?


#4

No, I don’t think you need an invitation. Just sign up.


#5

As an addition to the above list @Atul_Mourya

  1. http://threejs.live/#/

I often use it as a basis and simplify the examples until the real core comes out.


#6

You should also realize that three.js is a 3D library. That means you should have at least basic skills in computer graphics and the related math. Otherwise you just copy/paste code snippets and don’t understand what’s actually happen. Or your application has a bad performance and you don’t know why.

So apart from the mention resources you should have a look at some literature in this area. One of the best books about 3D graphics is:


#7

I do not recommended threejs.live since it uses an old version of three.js (R84). The site is obviously not maintained anymore. Also see https://github.com/mrdoob/three.js/issues/10481#issuecomment-366975218


#8

The quite fast sequence of revisions is a general problem when entering three.js.

When searching the web, beginners will find many very old pages among the top results.
When I did my first research in September 2016, the Stemkoski examples were already out of date. But even now you can find them far at the beginning. However, there is still some relevant information for beginners.

But as a newbie, it’s easy to fall for things that have changed fundamentally. And Migration Guide is not suitable for newcomers. The Deprecated API List is also difficult for beginners to understand.

For example, Particle System was now called points. A older clear example of the problems of the ongoing changes is shown at https://stackoverflow.com/questions/37005480/three-js-v74-and-up-dont-support-lathegeometry

The official examples are very professional and often too high for newcomers.

The tutorials are also quickly outdated.

It is sure. Geometry is easier for beginners to use than BufferGeometry, but should disappear at some point.

A beginner has to know all of this. Who should change this? :thinking:


By the way:
I have noticed that I still don’t understand why Geometry has 11 FPS in my simple example (100x100), BufferGeometry only 5FPS.
http://threejs.hofk.de/sandbox/Geometry_BufferGeometry/speedtestSimple.html
Similar http://threejs.hofk.de/sandbox/Geometry_BufferGeometry/speedtest.html


#9

For what it’s worth, I think A-Frame (https://aframe.io/) is a nice onramp into three.js for those who aren’t as familiar with 3D graphics or linear algebra. It is a declarative library on top of three.js, with many “components” encapsulating common bits of three.js logic. When you eventually need to write your own components, it’s mostly normal three.js code:

Code: https://glitch.com/edit/#!/aframe-displacement-shader?path=client/index.js:1:0
Preview: https://aframe-displacement-shader.glitch.me/

Basic syntax:

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Disclaimer: I’m one of the developers of A-Frame. :grin: