Start journey in 3js

Questions
1

Hi, i want to start my journey with 3js. I’ve been always thinking about 3d in my web development and i think i should start now. I was playing with 3js before but mostly things from tutorials so my knowledge is under basics.

I have question what should i learn like a webgl (not sure about all 3d technologies/tools) to create things such a :

  1. Walls
  2. https://particle-love.com

How can i start? I was looking for tutorials but learning 3js from scratch looks very difficult. My interests in 3d is like on those websites i provided, currently not interested to create “games” in browser, mostly 1 place objects interactive with page like a scrolling/zooming/mouse move.

Thank you in advance for all informations how can i start, also I’d love to see your work in 3js for more motivation.

2

If you can spare $95 - Threejs Journey is most likely the best and most effective way of learning everything to get you up and running.

If you don’t feel like spending too much time / money on learning - personally I’d suggest jumping to examples. Find something that slightly resembles the thing you’re trying to make - and look at the example source code in the bottom right. Most of the magically-looking 3D portfolios and websites (incl. especially Lusion, which Edan’s a CEO of) are more an art-direction rather than a technological challenge - they look pretty because they were designed beautifully, not because there’s some magic in the code.

1 Like
3

Hey,
nice you’re enjoying three js too.
First of alle the particle-love is written using three js. And in an older verion (r73) while r163 is current, I think. So all you can see in that demo is absolutely possible.
When I started with three js I started with copieng a demo, that actually isn’t available any more…

But first of all, you should create your own minimal scene just list explained here:

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

In the second step, I would suggest, try downloading three-JS and bind your imports to you local three js installation.

Also for coding, I LOVE using Visual-Studio-Code. If you haven’t done already, download node.js as this will give you npm tool to use in the vsc terminal.
Then you can install and run the npn http-server.
But that’s optional in the first place.

Once you got your first scene, try to add “Orbit-Controls” as these are quite common (although there are other cool controlls as well)
https://threejs.org/examples/?q=control#misc_controls_orbit

Once this is done I would suggest to start learning about lights. There are quite a lot of tutorials on the three js page.

Then, I guess, you can already go into particles:
https://threejs.org/examples/?q=particles#webgpu_compute_particles_rain

https://threejs.org/examples/?q=particles#webgpu_particles

And the other stuff in the example you provided is “2D-overlay”

So, as you can see, the best way (this is how I manage most things) try to find a simple looking example, rewrite it line by line so you can understand what happens there. And then take part by part of what you want to create and look for another example there.

1 Like
4

I agree.

That’s why I started the collection for myself and then published it. You then also have the conversation and the right contacts. They are noted as authors in the source code.

For example, you might be interested in

GradientCurvesMovingAlongPaths
SpheresOnNoisySphere

and some more.