Resources to start learning I started learning by checking out documentation, blog posts, video tutorials etc. There are many resources out there, so I'll just write the ones that worked really well for me and you might want to check them out (with the disclaimer that they might not work as well for you): I really enjoyed going through the Getting started section of ThreeJS. If you're more into video tutorials, then CJGammon has an Introductory series on youtube. For explanations on 3D concepts, I mostly go to the Real-Time Rendering book. I wanted to understand how shaders work and write my first shader (be it a dead easy one). It's quite hard to find resources on this topic for beginners... However, I really liked: Surma's Supercharged episode about WebGL shaders for image processing The repo with resources is public on Github. When actually starting the project, the best resources turned out to be the ThreeJS official documentation and their example apps. Before starting please visit the Threejs official one and make sure that installation gets done. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5d11xyjstkv489zywet2.PNG) you need to clear about the things which I marked below before starting. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fgv5cpj1z3f0prifn8b6.PNG) A by copy and pasting the sample code given on the webpage you will se some cube like structure which is animated and you can control it by your own tip of fingers as u see below... My first three.js app CREATING THE SCENE To actually be able to display anything with three.js, we need three things: scene, camera, and renderer, so that we can render the scene with the camera. And when I started doing this dice project my aim is to create the animated dice with a piece of code and I started creating by using my own code... 3d project1

Dice Project(Responisve with controls)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d6vsgkk6wdemwbykzivy.PNG) After this output, I realized that things will not get completed with only the code and I started working on the Threejs Editor or Blender. Blender: Blender is popular software which is used to create 3d structures according to our requirement. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5w49q6ebffq9tjjf0t2r.PNG) And after started using blender now here I am... ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/awdwii1si6t1b6twk5yh.PNG) And finally, you can see my Rendered 3d basic model on my screen link: https://mpportfolio.000webhostapp.com/semifinal/real.html source code: <model-viewer> example

Dice Project(Responsive)

Manoj Ponugoti

To get the files: https://github.com/sgost/Dice-project/tree/Threejs To support in the modern browser make sure the file format must be in (gltf)...

sgost

Dice Project using Threejs & Blender

Join Our Newsletter. No Spam, Only the good stuff.