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

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;

  			

        /*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);


		 camera.position.z = 300;
		/*adding animation to it*/
			 function animate(t) {
	
				camera.position.x = Math.sin(t/1000)*300;
                camera.position.y = 150;
                camera.position.z = Math.cos(t/1000)*300;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
	     		window.requestAnimationFrame(animate, renderer.domElement);
			};
			animate(new Date().getTime());