JSFiddle - React, Tailwind, and code Playground

by kunalvashist

HTML

<!-- Exmaple one is to just setting the scene camera and renderer with cube object with animation
		light shadow are used
		-->

JavaScript

/*
		Setting the intial parameter required to build a scene
			1. Setting the size usign height and width
			2. Setting the camera angle 
		*/

 		var height = window.innerHeight,
            width = window.innerWidth,
		    view_angle=45,
      		aspect = width / height,
  			near = 0.1,
            far =10000;

         /* properties that are required to create a mesh objects*/   
         var radius = 5,
             segments=10,
             rings= 16;


			

        /*Caching the dom element to attach*/
      	 var scene = new THREE.Scene();
		
		 var camera = new THREE.PerspectiveCamera(view_angle,aspect,near,far);
	     var renderer = new THREE.WebGLRenderer();
		 renderer.setSize(width,height);
	     document.body.appendChild(renderer.domElement);

		 // creating a cube material
		 var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000});
		 // creating a mesh with cube geometry
		 var cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50),cubeMaterial);
		 // add a cube to the scene
		 scene.add(cube);

		 /*adding light to the material*/
		 var light = new THREE.SpotLight();
      		 light.position.set( 170, 330, -160 );
      	     scene.add(light);
      	 /*adding one more cube geometry*/    
      	 var litCube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50),new THREE.MeshBasicMaterial({color: 0xFFF000}));
             litCube.position.y = 50;
             scene.add(litCube);
			// enable shadows on the renderer
			      renderer.shadowMapEnabled = true;

			      // enable shadows for a light
			      light.castShadow = true;

			      // enable shadows for an object
			      litCube.castShadow = true;
			      litCube.receiveShadow = true;

		 camera.position.z = 300;


/*adding plane to the area*/


var planeGeo = new THREE.PlaneGeometry(400, 200, 10, 10);
  var planeMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
  var plane = new THREE.Mesh(planeGeo, planeMat);
  plane.rotation.x = -Math.PI/2;
  plane.position.y = -25;
 ...