JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - interactive lines</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				background-color: #f0f0f0;
				color: #444;
			}
			a {
				color: #08f;
			}
		</style>
	</head>
	<body>

			
      <script type="x-shader/x-vertex" id="vertexshader">

			attribute float size;
			attribute vec3 customColor;

			varying vec3 vColor;

			void main() {

				vColor = customColor;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				gl_PointSize = size * ( 300.0 / -mvPosition.z );

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform vec3 color;
			uniform sampler2D pointTexture;

			varying vec3 vColor;

			void main() {

				gl_FragColor = vec4( color * vColor, 1.0 );

				gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );

				if ( gl_FragColor.a < ALPHATEST ) discard;

			}

		</script>

		<script type="module">

			import * as THREE from 'https://threejs.org/build/three.module.js';

			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';


			import { GUI } from 'https://threejs.org/examples/jsm/libs/dat.gui.module.js';
			import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

			let camera, scene, renderer, stats;

			let mesh;
			const amount = parseInt( window.location.search.substr( 1 ) ) || 10;
			const count = Math.pow( amount, 3 );

			const raycaster = new THREE.Raycaster();
      raycaster.params.Line.threshold = 55;
			const mouse = new THREE.Vector2( 1, 1 );

			const color = new THREE.Color();

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100...