JSFiddle - React, Tailwind, and code Playground

by A A

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var geometry;

var mouse = new THREE.Vector3( 0, 0, 0.5 );

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

		geometry = new THREE.BufferGeometry();
    geometry.drawRange.count = 1;
    
    var vertices = new Array( 1000 ).fill( 0 ); // use an array with enough space and init with 0 values
    
    var positionAttribtue = new THREE.Float32BufferAttribute( vertices, 3 );
    positionAttribtue.dynamic = true;
    geometry.addAttribute( 'position', positionAttribtue );
    
    var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
    
    var lines = new THREE.Line( geometry, material );
    lines.frustumCulled = false;
    scene.add( lines );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'contextmenu', onContextMenu, false );
    
    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function onContextMenu( event ) {

	event.preventDefault();

}

function onDocumentMouseDown( event ) {

  event.preventDefault();
  
  switch ( event.which ) {
    case 1: // left mouse click
    
    	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
			mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      mouse.unproject( camera );
     	addPoint( mouse );
      break;
      
    case 3: // right mouse click
 			removeLastPoint();
      break;
  }

}

function addPoint( coord )...