JSFiddle - React, Tailwind, and code Playground

by Browork

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";


var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
      renderer.setClearColor("#f0ebdd", 1);
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			

       let instancedEdges = new THREE.InstancedBufferGeometry();
		instancedEdges.copy(new THREE.EdgesGeometry(new THREE.CylinderBufferGeometry(10, 10, 10, 1, 16)));
    instancedEdges.instanceCount = 1000;
      
			var line = new THREE.LineSegments( instancedEdges, new THREE.LineBasicMaterial( { color: 0x00ffff } ) );
		  scene.add( line );


			camera.position.z = 5;
      
			var animate = function () {
				requestAnimationFrame( animate );

				renderer.render( scene, camera );
			};

			animate();
      const controls = new OrbitControls(camera, renderer.domElement);