Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="three.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 1000, window.innerWidth / window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();

			camera.position.z = 5;

			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );


			document.addEventListener('keydown', (event) => {
			  const keyName = event.key;
			  // console.log(event.keyCode);
			  if(event.keyCode == 38){
			  	// cube.position.y += 0.2;
			  	mesh.rotation.y += 0.1;
			  }else if (event.keyCode == 104){
			  	// cube.position.x += 0.2;
			  	mesh.rotation.x += 0.1;
			  }else if (event.keyCode == 102){
			  	// cube.position.y -= 0.2;
			  	mesh.rotation.y -= 0.1;
			  }else if (event.keyCode == 100){
			  	// cube.position.x -= 0.2;
			  	mesh.rotation.x -= 0.1;
			  }else if (event.keyCode == 98){
			  	// cube.position.y -= 0.2;
			  	mesh.rotation.y -= 0.1;
			  }else if (event.keyCode == 103){
			  	// cube.position.x -= 0.2;
			  	mesh.rotation.z -= 0.1;
			  }else if (event.keyCode == 105){
			  	// cube.position.x -= 0.2;
			  	mesh.rotation.z -= 0.1;
			  }

			});


			var geometry = new THREE.Geometry();
			var material = new THREE.MeshBasicMaterial({ color: 0xFFF, wireframe: true});

			var r = 3;
			for (var i = 0; i <= 360; i++){
				geometry.vertices.push( new THREE.Vector3(r*Math.cos(i/180 * Math.PI), Math.sin(i/180 * Math.PI), 1));
			}

			// geometry.vertices.push(

			// 	);

			for (var i = 0; i <= 360 - 2; i++){
				geometry.faces.push( new THREE.Face3(i, i+1, i+2));
			}

			geometry.computeBoundingSphere();

			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			var geometry2 = geometry.clone();
			var mesh2 = new THREE.Mesh(geometry2, material);

			mesh2.position.y += 2.5;


			console.log();
			scene.add(mesh2);

			var newgeo = new THREE.Geometry();

			// newgeo.merge(geometry);
			// newgeo.merge(geometry2);

			linematerial = new THREE.LineBasicMaterial({ color: 0xFFF });

			var lines = [];
			var tempLine = [];
			for (var i = 0; i < 360; i++) {
				lines[i] = new THREE.Geometry();

				lines[i].vertices.push(
					geometry.vertices[i],
					mesh2.geometry.vertices[i],
				);

				// tempLine[i] = new THREE.Line(lines[i], linematerial);
				// tempLine[i].computeLineDistances();

				// scene.add(lines[i]);
			}

			console.log(lines[0].vertices);
			var finalgeo = new THREE.Geometry();
			// for (var i = 0; i <= 360 - 2; i++){
			// 	finalgeo.faces.push( lines[i].vertices );
			// }

			finalgeo.computeBoundingSphere();

			var mesh23 = new THREE.Mesh(finalgeo, material);
			scene.add(mesh23);


			function animate() {
				requestAnimationFrame( animate );

				// mesh.rotation.z += 0.02;
				// mesh.rotation.x += 0.02;
				// mesh.rotation.y += 0.02;

				renderer.render( scene, camera );
			}
			animate();

		</script>
	</body>
</html>