JSFiddle - React, Tailwind, and code Playground

by bk_52

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js'

let renderer, scene, camera;

let line;
const MAX_POINTS = 500;
let drawCount;
let cCount = 0;
let rgb = [255, 255, 255];

init();
animate();

function init() {

	// info
	const 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 = "three.js animataed line using BufferGeometry";
	document.body.appendChild( info );

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

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

	// camera
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.set( 0, 0, 1000 );

	// geometry
	const geometry = new THREE.BufferGeometry();

	// attributes
	const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
  geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
  const colors = new Float32Array(MAX_POINTS * 3);
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));


	// drawcalls
	drawCount = 2; // draw the first 2 points, only
	geometry.setDrawRange( 0, drawCount );

	// material
	const material = new THREE.LineBasicMaterial({ vertexColors: true });

	// line
	line = new THREE.Line( geometry,  material );
	scene.add( line );

	// update positions
	updatePosAndColors();

}

function UpdateColor() {
    cCount += 1;
    if (cCount < 256)
        rgb[0] -= 1;
    else if (cCount > 256 && cCount < 512) {
        rgb[0] += 1;
        rgb[1] -= 1;
    }
    else if (cCount > 512 && cCount < 768) {
        rgb[1]...