
Three.js Fundamentals - petethomas
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
======
1337krew
For anyone interested I modernised the Three.js part of the marker based
augmented reality library AR.js into a separate library called THREE AR. You
can see it here
[https://github.com/JamesMilnerUK/THREEAR](https://github.com/JamesMilnerUK/THREEAR)

~~~
mlevental
I spent a nontrivial amount of time fiddling with arjs a couple of years ago
so I know how disorganized that codebase is. congrats on wrestling it down but
I'm curious why? what did you end up using the marker recognition for? I was
trying to build a product around but ultimately decided that the markers are
simply too awkward.

------
Fission
Three.js is insane, in a good way. Great abstraction of WebGL, very user
friendly, and surprisingly few things that it can't do, as long as you're
willing to think up some workarounds if something you're doing is super
unique.

------
nobody271
Question, what is the job market like for someone who is good with graphics
programming? I'm not the best at math but I have struggled my way through
linear algebra enough that with some practice I think I could be good at
graphics programming. It'd certainly be a nice change of pace from programming
CRUD forms for businesses.

~~~
hombre_fatal
You are shadowbanned. I didn't find an obvious reason when looking at your
post history which is why I'm telling you.

~~~
skrebbel
How can you tell?

~~~
kabwj
I assume when he posted that comment it was dead immediately. It had to be
vouched to show up.

~~~
skrebbel
Ah right, thanks.

------
nergal
I've made a lot of games with three js which I've published as open source on
github. [https://github.com/lallassu](https://github.com/lallassu)

Checkout these repos: \- parrothunt \- Qake (qake.se) \- saving nemo \- vox2
Etc...

At least for some inspiration perhaps :)

~~~
throwaway77384
Love it!

One minor thing I noticed, is that capturing the mouse doesn't seem to be
working on FF 66.0.3 on Linux (Manjaro). Not sure if that's because I have a
dual screen setup. I guess on a single-screen setup I wouldn't notice if I had
the browser in full screen.

Edit: There is a "lock mouse" button and I am an idiot. Thank you for reading,
I will leave this here for posterity.

~~~
nergal
Hehe yeah it's not that intuitive :)

The links might not work for the games anymore, but here are some of them to
try out:

[http://qake.se/demo2](http://qake.se/demo2)

[http://qake.se/demo](http://qake.se/demo)

[http://parrothunt.nergal.se/](http://parrothunt.nergal.se/)

[http://nemo.nergal.se/](http://nemo.nergal.se/)

[http://toad.webgl.nu/](http://toad.webgl.nu/)

[http://vox2.webgl.nu/](http://vox2.webgl.nu/)

All are created with ThreeJS and the source code is on Github.

------
yeahitslikethat
Three.js is good. Another option if you don't know is
[https://www.babylonjs.com/](https://www.babylonjs.com/)

~~~
finchisko
Tried babylonjs week ago when they released new version. It was my first
experience with 3D in the browser. But must say was very positive. I was able
to do everything I wanted. The only bad was the lights shines through solid
objects, so modeled room lamp is visible from the outside of the building :).

I didn't tried threejs though. So sorry for being bit of topic.

~~~
skocznymroczny
This behavior is expected. Without raytracing, lights are calculated locally
for the object, without taking other objects into account. Unless you enable
shadows, which add some computational cost but can prevent lights shining
through walls/objects.

------
thecupisblue
Jesus, this was a hit of nostalgia, back to my younger days when I'd download
OpenGL tutorials on my 56k all night and dive into every line the next day.
Thank you for this, got me peeking into it and remembering that 3D isn't a
scary thing.

------
Corinthian
Thank you! I've tried to follow three.js's own tutorials, and slip into coma
every time. These are a vast improvement!

~~~
joeberon
I don't think they're too bad, the three.js examples are good (if a little
sloppy in coding style)

I think the main thing that helps is some kind of previous knowledge about
OpenGL

------
ajkjk
I'm a few articles in and so far this a wonderful guide.

------
joeberon
Btw three.js works flawlessly with Typescript too in case anyone is interested

~~~
kvakkefly
I sort of agree, but there are some function signatures that don’t match
what’s in the code using @types/three, and mrdoob does not want to maintain
this. This gives a few @ts-ignore, but that’s not a big problem:)

~~~
joeberon
I thought it came with bundled typings now? I didn't have to use @types/three
it just came with the type definitions

~~~
delhanty
That's what I thought - @types/three *.d.ts got imported via a script in this
PR:

[https://github.com/mrdoob/three.js/pull/15597](https://github.com/mrdoob/three.js/pull/15597)

There's some discussion in there, but the way I read the conclusion was they
were going to be bundle the typings going forward.

~~~
kvakkefly
Very cool!

------
unknown1337
Mrdoob / aq are legendary.

Welcome to the future..

------
GordonS
As someone new to three.js, and who hasn't dabbled with 3D since the 90s, I
found this really easy to follow - really good intro!

------
ezekg
I love Three.js, but without UDP support in the browser, making most
multiplayer games with it is just not feasible yet, sadly.

~~~
arispen
how about using web sockets?

~~~
ezekg
It's possible, sure, but websockets still use TCP. TCP is not suitable for
most online gaming due to TCP retrying lost packets and generally being
slower, unlike UDP.

------
sam0x17
I was super excited to use Three.js and thought it would be easy to do what I
wanted to do. What I wanted to do was load a simple .obj model and display it.
Easy this was not. Hopefully someday they will merge in obj support from their
demos code section to actually be part of the main Three.js code :/

~~~
thrower123
This is a sadly common failing of many of the popular graphics libraries.

DirectX 9 and XNA were quite nice to work in, because they had model-loading
code baked right in, albeit you had to use .x or .xnbs. Later versions took
out that D3DX support, and you have to integrate something third-party like
Assimp.

~~~
sam0x17
Yeah it's nuts. I've literally written an obj loader in opengl before staying
up all night one night for a graphics assignment when I was in college, and
yet it took me a week to get three.js to load an obj.

------
cocoa19
On the rotating cubes, why are the borders showing up as sawed rather than
straight lines?

Thanks for the tutorial.

~~~
_def
That is called aliasing. Three.js defaults to it, but you can turn
antialiasing on by passing the option to the WebGLRenderer. I added it here to
the example, line 10:
[https://codepen.io/anon/pen/XwgGrW](https://codepen.io/anon/pen/XwgGrW)

~~~
dahart
I think this page might be defaulting to a pixel ratio of 1. On mobile and
high-dpi devices, that automatically makes the rendering appear much more
aliased, in return for much faster rendering and much less memory usage.

------
enriquto
Why are the code examples on black over dark gray? It is nearly unreadable.

------
holoduke
Can you actually generate lightmaps with three.js? I did a lot with it years
ago. Really nice abstraction library.

