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.

you need to clear about the things which I marked below before starting.

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...

<!DOCTYPE html>

My first three.js app
<br> body { margin: 0; }<br>

<br> const scene = new THREE.Scene();<br> const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );</p> <div class="highlight"><pre class="highlight plaintext"><code> const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; const animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); }; animate(); </script> </body> </code></pre></div> <p></html></p> <div class="highlight"><pre class="highlight plaintext"><code> CREATING THE SCENE </code></pre></div> <p>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.</p> <p>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...</p> <p><!DOCTYPE html><br> <html><br> <head><br> <meta charset="utf-8"><br> <title>3d project1</title><br> <style><br> body {margin:0;}<br> canvas{width:100%; height:100%;}<br> h1{text-align:center;<br> color:Red;}<br> </style><br> <script src="js/three.js">

</head>
<body>
    <header>
        <h1>Dice Project(Responisve with controls)</h1>
    </header>
     <script type="text/javascript">
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 1000 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //to make responsive//
        window.addEventListener('resize', function() 
        {
            var width = window.innerWidth;
            var height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        } )
        //controls//
        controls = new THREE.OrbitControls(camera, renderer.domElement);


        //shape//

        const geometry = new THREE.BoxGeometry(5, 5, 5);
        const material = new THREE.MeshBasicMaterial( { color: 0xCCCCFF , wireframe:false } );
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 15;

        const geometry2 = new THREE.BoxGeometry(5, 5, 5);
        const material2= new THREE.MeshNormalMaterial( { color: 0xCCCCFF , wireframe:false } );
        const cube2 = new THREE.Mesh(geometry2, material2);
        scene.add(cube2);
        cube2.position.x =14;

        const geometry3 = new THREE.BoxGeometry(5, 5, 5);
        const material3= new THREE.MeshNormalMaterial( { color: 0xCCCCFF , wireframe:false } );
        const cube3 = new THREE.Mesh(geometry3, material3);
        scene.add(cube3);
        cube3.position.x=-14;





        //animation//

        var update = function(){
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.005;

            cube2.rotation.x += 0.01;
            cube2.rotation.y += 0.005;

            cube3.rotation.x += 0.01;
            cube3.rotation.y += 0.005;

        };

        //draw scene//

        var render = function(){
            renderer.render(scene, camera);
        };

        var GameLoop = function(){
        requestAnimationFrame(GameLoop);

        update();
        render();
    }

    GameLoop();



    </script>
</body>

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.

And after started using blender now here I am...

And finally, you can see my Rendered 3d basic model on my screen

link: https://mpportfolio.000webhostapp.com/semifinal/real.html

source code:

<!DOCTYPE html>

<model-viewer> example

<link rel="stylesheet" href="demo-styles.css">

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->

<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->

<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/focus-visible@5.0.2/dist/focus-visible.js" defer></script>

ios-src="https://cdn.glitch.com/3354cc1b-c76f-4b36-bd7e-d0ea7fd2f98e%2Funtitled.usdc?v=1607617855695"
poster="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2Fposter-astronaut.png?v=1599079951717"
alt="A 3D model of an astronaut"
shadow-intensity="1"
camera-controls
auto-rotate ar>

Dice Project(Responsive)

Manoj Ponugoti

</section>

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)...

Blog

Dice Project using Threejs & Blender

Manoj Ponugoti

Dice Project(Responsive)

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

Related