Prerequisites for a designer to learn threejs?

Questions
1

UX Designer, looking to learn threejs from scratch what are the things I need to learn to get started and any reference from where?
I have worked with different 3D software but I’m not a coder or developer?

2

As a base you need basic knowledge in HTML and Javascript.
Then there are some things you can look at on the net, e.g.
https://discoverthreejs.com/

I myself always like to learn from examples and therefore created this page for myself and others: * discourse.threejs.hofk.de

3
  • 3D geometry primer - vector math, coordinate system (“3D Math”)
  • Algebra Boole primer - the binary system and operations
  • Algorithms and data structures - introduction
  • HTML
  • Javascript
  • Object oriented programming primer
  • Books / courses on writing clean and efficient Javascript code
  • Lighting - a course on how to use light to light a scene, an object, etc will put you way above the average (photography / cinematography category)
  • A couple of good books on Three.js eg the 2023 version of Learn Three.js (4th edition)

From there on the sources available on:

BTW, If you look for “free courses” online you’ll find a ton about everything.

1 Like
4

this course is priceless https://threejs-journey.com, there is nothing like it and if three interests you consider buying.

it goes through everything, from basics to advanced topics, even blender, baking, creating basic models, dealing with compression. and in the end three + react which is what you’ll most likely end up doing, especially as a UX designer. with normal threejs you are constrained by what you know, and if you want to get even close to professional design agency output you need to know a lot, intense study of math, shaders, physics, etc, with little shared knowledge being available to you because agencies keep secrets. react dissolves that, you can learn what interests you while benefiting from an eco system of interoperable parts, close to your design systems. a few weeks in you will already be able to accomplish most of what you see on awwwards. to get an impression check out the examples.

5

I strongly disagree with this statement. Learn the language, not just the framework. When you master a language, everything else becomes much easier to grasp because you understand why something works the way it does, which allows you to improve and innovate.

1 Like
6

Agreed, to add to this, three comes with full community support that is completely open to helping solve problems in a matter of hours sometimes minutes + full thorough, comprehensive documentation, whereas early users will find it frustrating that there’s no official help forum for r3-drei / r3f apart from recent funneling into paid discord servers and little to no actual r3f / drei problem solving in this forum, as well as the documentation being scattered, incoherent and incomplete, proposing / pushing that it’s easy from someone who’s building components that understands three and react / r3f onto people wanting to learn then discovering there’s no channels of support or community for something they find complex will be underwhealming and feel impossible.

Yes a cube with orbit controls is easy to do with r3f / drei but the moment you want to start actually doing fresh things that havn’t been done yet your left needing to have a comprehensive understanding of how react / r3f works (without community support) as well as needing to understand three anyway…

1 Like
7

Hi dhoopdesign,

I need to write…

HTML + Javascript + Three.js is enough for this era.
Clever languages ​​that try to simplify the great Base Languages ​​only hinder the lives of programmers, especially beginners, they only cause headaches, hiding important routines for new creations.

And please note that there are no hidden tricks in the Three.js example pages.

And what’s more, for creating objects, yes, knowing Blender will enrich your productions.

Good luck!

1 Like
8

You guys need to calm down, it’s like a trigger word. I never said do not learn three. You are still using threejs, how can you use it but not know it. I said that it is closer to a design system and that it makes re-use easier which has sparked a component eco system. The examples link I posted should speak for itself.

Threejs journey goes through all the basics and most advanced topics, including blender, before reaching react. It is an incredible learning resource. Bruno Simon is a professional designer/3D dev with lots of experience in the field and a ton of real world projects under the belt. I don’t think we disagree on that one.

9

I wasn’t talking about the Threejs Journey that you mentioned. If you see which part I quoted from you, you would’ve seen that. You have the tendency to scare people away from the language itself and constantly push people towards react, like its the only viable option, while it is far from the truth. Everything has it’s pro’s and cons, but preemptively steering people towards one specific library while “bashing” other options, is not the way to go about it.

4 Likes
10

As a frequent reader in this forum, I need to repond to this,

While @drcmda often suggests R3F as a framework that easily embed three into react environment with all its advantages (re-usability and optimization) and some of its cons, I strongly disagree that he scares people away from threejs, vanilla javascript, or any other language. At the very contrary. I always appreciated his inputs, his opinions (that obviously would be subjective, so it’s up to the reader to judge the relevance of his/her app/project) and his examples/arguments in favour of R3F.

We should allow people to provide their opinion about threejs related technologies and understand that these opinions could be biased. The reader should do their own due diligence and homework.

Diversity is wealth !

1 Like