JSFiddle - React, Tailwind, and code Playground

by ccakn5870

HTML

<body>
<div id=container>

</div>

</body>

JavaScript

var camera, scene, renderer;
var clock = new THREE.Clock();

init();
createScene();
addToDOM();
render();
update();

function init() {
    var canvasWidth = window.innerWidth;
    var canvasHeight = window.innerHeight;
    var canvasRatio = canvasWidth / canvasHeight;

    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.setClearColor(0x000000, 1.0);

    camera = new THREE.PerspectiveCamera( 45, canvasRatio, 0.1, 1000);
    camera.position.set(0, 1, 13);
    camera.lookAt(new THREE.Vector3(0, 0, 0));		
}

function createScene() {
	var Color1 = 0x00ff00;
	var Color2 = 0xFFA500;
  var mesh = nSidedPolygon(8,Color1,Color2);
	scene.add(mesh);
}

function addToDOM() {
    var container = document.getElementById('container');
    container.appendChild( renderer.domElement );
}

function render() {
    renderer.render(scene, camera);
}

function update() {
    window.requestAnimationFrame(animate);
    render();
}

function nSidedPolygon(n, originColor, endColor){
	var cr = 2;
  var geometry = new THREE.Geometry();

	geometry.vertices.push(new THREE.Vector3(0,0,0));	
    for (var i = 0; i < n; i++) {
		var x = cr * Math.sin((Math.PI / n) + (i * ((2 * Math.PI)/ n)));
		var y = cr * Math.cos((Math.PI / n) + (i * ((2 * Math.PI)/ n)));
		geometry.vertices.push(new THREE.Vector3(x,y,0));
    }
	
    for (var i = 0; i < n-2; i++) {
		var face = new THREE.Face3(0, i + 1, i + 2);
		face.vertexColors.push(new THREE.Color(originColor));
		face.vertexColors.push(new THREE.Color(endColor));
		face.vertexColors.push(new THREE.Color(endColor));
        geometry.faces.push(face);
    }	
		
	var material = new THREE.MeshBasicMaterial( 
		{
			vertexColors: THREE.VertexColors, 
			side: THREE.DoubleSide 
		}
	)
	var mesh = new THREE.Mesh(geometry, material);
	return mesh;
}