Episode 1: Before the Dawn of Browser 3D

What is Three.js? Froggy’s Journey into the Wonderful World of Browser 3D

Note

This story is written with the assistance of generative AI for the purpose of making Three.js learning enjoyable. While we pay careful attention to the accuracy of technical information, we cannot guarantee that all content is completely accurate. Please use this as a supplementary learning tool and enjoy it with a relaxed mindset.

Characters

Froggy: An energetic young frog who recently started learning programming. While there’s still so much he doesn’t know, his curiosity knows no bounds. Known for his distinctive “~ribbit” speech pattern.
Professor Saburo: A knowledgeable professor who is very well-versed in 3D graphics and web technologies. He kindly answers any question with patience.

Froggy: “Hello, Professor Saburo, ribbit! I came here today because there’s something I really want to ask you, ribbit!”

Professor Saburo: “Oh, hello there, Froggy! You seem especially energetic today. What’s on your mind?”

Froggy: “Recently, when I’ve been looking at websites, I’ve seen pages with 3D visuals that move around just like in games, ribbit! What’s going on with those, ribbit? With just the HTML and CSS that I know, I don’t think I could create anything like that, ribbit!”

Professor Saburo: “Ah, you’ve noticed something very interesting! Those are most likely created using JavaScript libraries like Three.js to render 3D graphics through a technology called WebGL.”

Froggy: “Three-jay-ess…? Web-gee-ell…? They sound like magic spells, ribbit…”

Professor Saburo: “Haha, don’t worry. I’ll explain everything step by step. First, as you’ve observed, it used to be incredibly difficult to freely animate 3D objects in browsers.”

Froggy: “Really, ribbit?!”

Professor Saburo: “Indeed. When the web first emerged, displaying text and simple images was about all it could handle. But there were people who wanted to create 3D worlds on the web. That’s where VRML, a technology that appeared around 1994, came in.”

Froggy: “V-R-M-L… That sounds like a powerful name, ribbit!”

Professor Saburo: “Virtual Reality Modeling Language, which translates to ‘Virtual Reality Modeling Language’ in Japanese. As the name suggests, it was a language for describing 3D models. However, to view VRML content, browsers needed special additional functionality called ‘plugins’ to be installed. Since not everyone would install those plugins, it never became widely adopted.”

Froggy: “I see, I see. So you needed special preparation just to view it, ribbit. That sounds pretty inconvenient, ribbit.”

Professor Saburo: “Exactly right. Later, in the 2000s, technologies like Flash and Shockwave became popular. You might have seen websites from back then with animations and games running, Froggy.”

Froggy: “Oh, I know those, ribbit! The ones where buttons would light up and sparkle when you pressed them, and characters would move around, ribbit!”

Professor Saburo: “That’s right! Flash and Shockwave greatly expanded the web’s expressive capabilities. They could handle 3D graphics too. However, these technologies also required plugins. Plus, they had several challenges - they took time to load, had security issues, and other problems.”

Froggy: “I see. So back then, you couldn’t create rich expressions in browsers without those ‘plugins,’ ribbit. But then, how do things move around smoothly now without plugins, ribbit?”

Professor Saburo: “That’s an excellent question, Froggy! This is where WebGL finally makes its grand entrance. The arrival of WebGL was truly a revolutionary moment for 3D expression in browsers.”

Froggy: “A r-revolution! Something amazing has arrived, ribbit! Hop hop!”

Professor Saburo: “Oh my, you’re getting quite excited! Well then, in the next chapter, I’ll tell you how WebGL and our main topic, Three.js, transformed the world of browsers.”

(To be continued in Episode 2)