Got started with ThreeJS - WebXR Development ๐Ÿ˜Ž

Got started with ThreeJS - WebXR Development ๐Ÿ˜Ž

ยท

3 min read

๐Ÿ‘‹ Hello world! This is Santhosh Reddy, a 17 year old developer and a curious web3 learner. I keep building projects on blockchain like Dapps and smart contracts which reflects the real world use cases.

Intro... ๐Ÿ™‹โ€โ™‚๏ธ

I was a web3 developer and a learner too... But now, not just web3 but also 3D, Virtual reality & Augmented reality.

ThreeJS is a WebGL & Web3XR framework. I got curious about how to develop 3D UIs, VR & AR experiences on the web and finally jumped into it...

Extended Reality (XR) is nothing but the combo of Virtual Reality (VR), Augmented Reality (AR) and Mixed Reality (MR).

As soon as I heard that I can develop 3D interfaces and AR & VR experiences on the web using Javascript, I started learning it 2 weeks ago.

Why ThreeJS...โ“

There are many other WebXR frameworks like BabylonJS, Unity3D, A-frame and others...

The reasons why I chose ThreeJS are,

  1. It's easier to learn and more powerful when compared to Unity3D.

  2. A-frame is easier than ThreeJS but doesn't have high customization. A-frame is also built using ThreeJS

  3. ThreeJS is a bit less powerful than BabylonJS but ThreeJS's easy learning curve and its large community made me choose it.

  4. It's more popular, and used by a most popular metaverse Decentraland earlier but now shifted to BabylonJS.

  5. Finally, ThreeJS is a good step to take and after learning it, shifting to BabylonJS which is a bit more powerful is easy.

My 2 weeks of learning... ๐Ÿ“š

In a span of two weeks I learnt the important and fundamental concepts like,

  1. Installing & Initialising

  2. Camera & Controls

  3. Basic geometries and materials

  4. The supreme geometry, BufferGeometry to build custom geometries. UV texture mapping

  5. Loading external models (gltf/glb) and animating them.

  6. CSS3D to create 3D DOM elements.

My 1st Project... โœจ

The best way to learn is to do.

While learning, I created a project 3D Mart which covers all the above concepts.

3D Mart is a simple 3D supermarket. It contains racks and divided them into categories, filled them with a few products of 3 in each category, a cart, shop counter table, a bot standing at the counter, decorative plants and a few ads stuck to the racks.

demo : 3D Mart

code : Github Repo

Checkout the demo to see my project. The above given code can help you while learning it.

Future Plans... ๐Ÿ”ฎ

After learning even more deep concepts like building AR experiences and advanced animations, I'm planning to build a 3D shopping mall (ecommerce).

Recently I completed my Web3 project UMart. UMart is a blockchain based single vendor ecommerce web app template.

My plan is to upgrade UMart in the near future to provide 3D UI as well as AR experiences on the web. Simply, a metaverse mall.

Final Thoughts... ๐Ÿ™‚

Hmm... Finally, I started my VR & AR journey after Blockchain.

As a friend, I recommend you to learn Blockchain development or VR & AR development because they are the future. You can choose any of your favourite languages or frameworks, but learning them is really worth it.

Taking a leave for now... ๐Ÿ‘‹ Bye!

ย