JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="http://threejs.org/build/three.min.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Animate the drawing of a line using LineDashedMaterial hack

var mesh, lines = [], renderer, scene, camera, geometry, vertices, colors, mouse = {x:0, y:0}, raycaster = new THREE.Raycaster();

init();

function init() {

	// info
	var info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = 'Drag mouse to rotate camera; scroll to zoom';
	document.body.appendChild( info );

	// renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// scene
	scene = new THREE.Scene();

	// camera
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 55;

  geometry = new THREE.BufferGeometry();
  // create a simple square shape. We duplicate the top left and bottom right
  // vertices because each vertex needs to appear once per triangle.
  vertices = [
    0,
    0,
    0,
    11,
    0,
    0,
    11,
    0,
    0,
    11,
    11,
    0,
    11,
    11,
    0,
    0,
    11,
    0,
    0,
    11,
    0,
    0,
    0,
    0
  ];

  colors = new Array(vertices.length);
  colors.fill(255);

  // itemSize = 3 because there are 3 values (components) per vertex
  geometry.addAttribute( 'position', new THREE.BufferAttribute(new Float32Array(vertices), 3 ) );
  geometry.addAttribute('color', new THREE.BufferAttribute(new Uint8Array(colors), 3));

  var material = new THREE.LineBasicMaterial( {linewidth: 4, color: 'red', vertexColors: THREE.VertexColors});
  var line = new THREE.LineSegments( geometry, material );
  
  
  let newLine = line.clone();
  newLine.position.x = 20;
  
  lines.push(line, newLine);
  scene.add( line,...