Dice Project using Threejs & Blender
Tags: html, threejs, blender
Published: 2020-12-07 18:15:07

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


<!DOCTYPE html>
<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			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>
</html>




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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3d project1</title>
		<style>
            body {margin:0;}
            canvas{width:100%; height:100%;}
            h1{text-align:center;
            color:Red;}
          </style>
          <script src="js/three.js"></script>
          <script src="js/OrbitControls.js"></script>
           
           
	</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>
</html>

![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:


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>&lt;model-viewer&gt; example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <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 -->
<!--     <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> -->

    <!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<!--     <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script> -->

    <!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<!--     <script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script> -->
    
    <!-- 💁 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>

  </head> 
<body>
  <div id="card">
    <!-- All you need to put beautiful, interactive 3D content on your site: -->
    <model-viewer src="https://cdn.glitch.com/3354cc1b-c76f-4b36-bd7e-d0ea7fd2f98e%2Frealcube.gltf?v=1607617689285"
                  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>
    </model-viewer>
    <section class="attribution">
      <span>
        <h1>Dice Project(Responsive)</h1>
        <span>Manoj Ponugoti</span>
      </span>

    </section>
    
  </div>
  
  
 
 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)...