JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://micicle.glitch.me/trail.js"></script>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;
var clock = new THREE.Clock(), trailTarget;
// specify points to create planar trail-head geometry
var lastTrailUpdateTime = performance.now(),
		lastTrailResetTime = performance.now();
var circlePoints = [];
		var twoPI = Math.PI * 2;
		var index = 0;
		var scale = 10.0;
		var inc = twoPI / 32.0;

		for ( var i = 0; i <= twoPI + inc; i+= inc )  {

			var vector = new THREE.Vector3();
			vector.set( Math.cos( i ) * scale, Math.sin( i ) * scale, 0 );
			circlePoints[ index ] = vector;
			index ++;

		}
    
    const rad = 5;
var trail;

var updateTrailTarget = function updateTrailTarget() {

		var tempQuaternion = new THREE.Quaternion();

		var baseForward = new THREE.Vector3( 0, 0, -1 );
		var tempForward = new THREE.Vector3();
		var tempUp = new THREE.Vector3();

		var tempRotationMatrix= new THREE.Matrix4();
		var tempTranslationMatrix= new THREE.Matrix4();

		var currentTargetPosition = new THREE.Vector3();
		var lastTargetPosition = new THREE.Vector3();

		var currentDirection = new THREE.Vector3();
		var lastDirection= new THREE.Vector3();

		var lastRotationMatrix = new THREE.Matrix4();

		return function updateTrailTarget( time ) {

			if ( time - lastTrailUpdateTime > 10 ) {

				trail.advance();
				lastTrailUpdateTime = time;

			} else {

				trail.updateHead();

			}

			/*if ( time - lastTrailResetTime > 2000 ) {
				trail.reset();
				lastTrailResetTime = time;
			}*/

			tempRotationMatrix.identity();
			tempTranslationMatrix.identity();

			var scaledTime = time * .001;
			var areaScale = 100;

			lastTargetPosition.copy( currentTargetPosition );

			currentTargetPosition.x = Math.sin(.5)*5
      currentTargetPosition.z = Math.cos(.5)*5
      

			lastDirection.copy( currentDirection );

			currentDirection.copy( currentTargetPosition );
			currentDirection.sub( lastTargetPosition );
			currentDirection.normalize();

			tempUp.crossVectors( currentDirection, baseForward...