The House of Sammy
This post is pretty simple. Lesson 9 is about masking textures in three.js. Pretty simple. You have a PNG and you want to use it for masking, add some color and animate them on the screen. All basic functionality that three.js supports out of the box.
Lesson 10 is also very simple. It is about building a structure from some coordinates in a file. Back when this lesson was written, the “worlds” being built were very simple. Today of course the worlds are very complex ranging from relatively simple Unity worlds to productions that rival major motion pictures. But it was one of the NeHe lessons, so I included it.
However instead of the mud-styled picture of the original author, I used an image of our puppy, Sammy who was 4 months old at the time (weighing about 55 pounds). Sadly, Sammy was born under a bad sign and had several birth defects making his shoulders weak. Worse at the age of only 3 years old, he developed abdominal cancer and had to be put to sleep in January 2017. Poor guy, poor us. RIP Sammy.
One aspect of this lesson is the introduction of the GFX.Scene object. This is a wrapper for the various basic objects in a three.js Scene. Why bother one would wonder. In a series of demos like the NeHe items, there is a LOT of boiler plate: allocating and initializing the scene itself, setting up the camera, setting up the lights, adding stats, maybe some axes, etc. etc. So I wrote an object that makes it pretty easy in a few lines to initialize all of that. As we go through the lessons will see some more functionality added (multiple cameras, etc.).
You can find the lesson at Geo-F/X here. As always, the sources are on github here. Feel free to contact me at firstname.lastname@example.org or comment on this article directly.
The infamous spinning NeHe cube!
NeHe and three.js
This is the first of a series of blogs on the implementation of the old NeHe demos in three.js. I’ll try to cover 2 or 3 of them a week, but there are 48 of them so it will take a while.
I got started with 3D a long time ago. Back in the days when OpenGL was just starting. Support was terrible. The hardware was all over the place, mainly proprietary. The APIs varied from platform to platform. The only part that was consistent was the inconsistency. But when you got something to work it was cool! So we persevered. Jeff Molokee therefore came up with a series of demos called NeHe on gamedev.net. I was buried in writing PostScript interpreters in those days, but it was fun to read what others were doing and dabble a little on the side.
The Evolution of OpenGL
The first 8 NeHe Demos
Here are the first 8, mainly done by Johannes – These first ones are pretty straightforward ports. A few were trivial since three.js did all the heavy lifting, but some were more interesting. I’ll talk about some of the more interesting parts in subsequent blogs.
1 – Getting Started
2 – Your First Shapes
3 – Adding Some Color
4 – Adding Some Depth
5 – Putting It in Motion
6 – Using Textures
7 – Introduction to Filters
8 – Introduction to Blending
Any comments or feedback is welcome!
All the sources for the demos can be found on github here. I can be reached at email@example.com or you can comment on the article directly.