Create a Interactive website using Three js

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

Scene

Renderer

Camera

(optional) interactivity.

why use three.js ?

games

user experience

interactivity

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>

Create a Interactive website using Three js