JSFiddle - React, Tailwind, and code Playground

by wwfc

JavaScript

/**
 * Hello
 * Three.js particles
 * Morphing between multiple shapes
 * Getting particle coords from BMPs
 * Camera tweening
 *
 * by Felix Turner
 * www.airtight.cc
 *
 **/
if(!Detector.webgl)
	Detector.addGetWebGLMessage();

//VARS
var container, stats;
var PerspectiveCamera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;
var mouseX = 0, mouseY = 0;
var stars = [];

var imageData, imageData2, imgWidth, imgHeight;

var images = []
var imageDatas = [];
var imageCount;

var particleHue;
var material;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var PARTICLE_COUNT = 15000;
var MAX_DISTANCE = 1500;
var IMAGE_SCALE = 5;

function init() {
	//load images to use as shapes
	images = loadImageArray(["img/webgl.png", "img/hello.png", "img/la4.png", "img/la.png", "img/la2.png","img/webgl2.png","img/la3.png","img/la6.png"], onImagesLoaded);
}

function onImagesLoaded() {
	imageCount = images.length;

	// stop the user getting a text cursor
	document.onselectstart = function() {
		return false;
	};
	for(var i = 0; i < images.length; i++) {
		imageDatas.push(getImgData(images[i]));
	}

	//init 3D scene
	container = document.createElement('div');
	document.body.appendChild(container);
	PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
	PerspectiveCamera.position.z = 1300;
	scene = new THREE.Scene();
	scene.fog = new THREE.FogExp2(0x000000, 0.0004);
	geometry = new THREE.Geometry();

		var sprite1 = Texture1 = THREE.ImageUtils.loadTexture("img/particle.png");

	material = new THREE.ParticleBasicMaterial({
		size : 30,
		map : sprite1,
		blending : THREE.AdditiveBlending,
		depthTest : false//,
	});

	for(var i = 0; i < PARTICLE_COUNT; i++) {
		geometry.vertices.push(new THREE.Vertex());
		var star = new Star();
		stars.push(star);
	}

	material.particleHue = Math.random();
	material.color = new...