Posted in Uncategorized

JS Post 5 – Three dot JS

Okay, So what have I learnt today? As I was searching for the various possibilities that JS could possibly come up with… I stumbled on this Three.JS.

3D graphics can be difficult, especially 3D in the browser. Frameworks like three.js make it a bit easier, but the official documentation is still under construction and there are a few quirks that can stop beginners from ever getting started. If you’re new to 3D, then you could use all the help that you need …

Even though three.js might look complex at first, it would actually take even more code to write the same thing in pure WebGL ( is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. ), mostly because we’d need to write a rendering engine. All the heavy lifting is done with three.js without sacrificing much flexibility.

Okay first things first : In order that you can see what you do with Three JS you gotta enable the WebGL in your browser . On Chrome, I think it is automatically enabled and FireFox is also supportive of WebGL. Idk about the others.

Here’s the caniuse.com matrix for WebGL compatibility. Hopefully support will pick up in the future because this is a really cool technology!

So that being said, Three JS is a JS platform where you can implement 3D graphics on the web. Since I had like only a day and a half for this I have only worked with a particle system and I am moving on from that.

Download three.js (or maybe not… but I am just putting out the option there)

Head over to http://threejs.org/ and click the “Download” link on the left side of your screen. Once the zip has finished downloading, open it up and go to the build folder. Inside, you’ll find a file called three.min.js and, and that has all the code you will need to include as a header script to do the 3D magic to your website.

Okay and one more thing, Three.JS is a bit hard to get a hang of mostly cause this is more of a server-side thing so you will have to install a server and run from it so that you can figure out the kinda mediocre parts of this framework.

What I did was (I do have a WAMP server but I am not that desperate) I used the CodePen thing that I have been hearing about for some time and it turned out pretty neat.

//codepen.io/Steffin/embed/EyPVxQ/?height=500&theme-id=dark&default-tab=result&embed-version=2

Managing both this iFrame and a random script file that I have been posting for a while on the same page is taking a toll on the page load time so this time there’s no background script

I think three.js is an amazing project that unlocks the power of WebGL for people that aren’t 3D graphics gurus (like me). Browser support is still picking up, but I feel like some of the most practical applications of WebGL sit with product demos: Imagine exploring a new world in full 3D from the comfort of your browser.

However, such a low the barrier to entry makes it possible to create cool logos or make music videos without spending years writing renderers or other complex code. If you’re a little more dedicated, you could even make games and build worlds. It makes the browser a much more experiential place, which I think is pretty awesome. Who wants to make documents? I want to make a game.

Site :  link

GitHub : link

YouTube : link

♥(ˆ⌣ˆԅ)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s