Create a Interactive website using Three js

Create a Interactive website using Three js

dailyaspirants.com


Hi friends ,Totally we learn an basics  of three js We will start by setting up threejs

Let’s start with basic setup. We need to import  files.  threejs 



Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of threejs in the js/ directory, and open it in your browser.







so what is three js?
i will be talking about creating interactive environments in three js. WebGL is a javascript api that allows you to render 3D and 2D graphics without the use of plugins and three js is an essentially an abstracted layer on top of WebGL that makes WebGL alot of easier to use. can also use the html canvas element and you can also use SVG and across a ton of browers so you don't actually have to download an application in order to experience  your full immersive environment.

set the scene 

  1. Scene 
  2. Renderer
  3. Camera
  4. (optional) interactivity.

why use three.js ?

  1. games
  2. user experience
  3. interactivity
  4. fancy website link ecommerce.
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 camera.








<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
</head>
</html>






var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );




Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer.

There are a few different cameras in three.js. For now, let's use a PerspectiveCamera.

If you wish to keep the size of your app but render it at a lower resolution, you can do so by calling setSize with false as updateStyle (the third argument). For example, setSize(window.innerWidth/2, window.innerHeight/2, false) will render your app at half resolution, given that your <canvas> has 100% width and height.


use the geometry material






var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;




we need to create  a BoxGeometry.and now we are use several materials  but we will take a MeshBasicMaterials . and add mesh in the scene function and finally rendering the animate loop.

Final Result:






<html>
 <head>
  <title>My first three.js app</title>
  <style>
   body { margin: 0; }
   canvas { width: 100%; height: 100% }
  </style>
    
        
 </head>

 <body>

  <script src="js/three.js"></script>
  <script>
   var scene = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera( 20, window.innerWidth/window.innerHeight, 0.1, 500 );

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

   var geometry = new THREE.BoxGeometry( 1, 1, 1 );
   var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 ,wireframe:true });
   var cube = new THREE.Mesh( geometry, material );
   scene.add( cube );

   camera.position.z = 20;

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

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
   };

   animate();
  </script>
        
    
 </body>
</html>



output:


dailyaspirants.com

Previous Post Next Post