regl实现多色方块粒子组成数字翻转动画效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：regl实现多色方块粒子组成数字翻转动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
	height: 100%;
}

body {
	background-image: radial-gradient(ellipse at center, #2c0c00 8.0%, #000 100.0%);
	background-size: 160% 160%;
	background-position: 50% 50%;
	overflow: hidden;
}

h1 {
	position: relative;
	z-index: 1;
	color: rgb(255, 94, 30);
	font-family: 'Luckiest Guy', sans-serif;
	font-size: min(8vw, 64px);
	text-align: center;
	top: 65vh;
}

img {
	display: none;
}
</style>

</head>
<body translate="no">
<h1>Followers!</h1>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAIAAAAt/+nTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACJRJREFUeNrU2EePFEkQBWAGGu+99957EHBBgMQJzlz4k1yRkBAehPfee+897Df1ZnOKnoGdlXYlyEOruioj4sULl1Xduv3hq6XTu927d2+68+3btz/AAbh79OjRq1evnj17umhpaX36/fv3r1+/fv78+dOnTy5+N0/aHIC10Wj0799/yJAhw4cPHzp0aL9+/fjgEdDv3r17/vz506dPX7x48fbt2y9fvvDqpxqrVb/zvVpdBfQvxVsig3K4p0+fPnv27GnTpo0ZM2bAgAFc8hTcN2/ePHjw4Nq1a5cuXfLLk48fP3ZUKoD0JIAlCUUs0fP7i+jBUMTZ7bp4I4bBnTVr1vr161esWDFp0iRx6N27d7QQA/fly5e3bt06efLkgQMHTp8+/fDhw7oPoUAAsTBq1CjicLhpA9vi9ujRI26LHhydem7/oEGDhg0bNmLECBddF2/EPAemTJmydOnSxYsXA1GnMD7QC5lHffv2pYKix48f+404bxPAuXPnzpw5UwD79OkTBB8+fBC9y5cvnz9//urVqx2jJ1GlK5EZM2bMmTMHDKq6Lt6oKyJGVx19MtJfYXXfL+HXr19TJK9klz3Qjx49euHChWvXrkXB5MmTBw8ebGcQ2CN6N2/edH///v1N0aOZxalTpy5btmzVqlXz588fO3asSLKV7G8SP3XqFHFhKT40so+jL6olTJSWugluAeWea8GliJlz585RarP7CIN+w4YNa9asAcUeIqUQ6dES5IZf0aP8xIkTARHncb98+fJNmzYtWbIEenvifJN40pI/BNGX4Lc5IEM4IM9gog4myDQfWpAxulpyrEe1XIypVnhiT+bgHnrJA31Kv77ifGBR+7FaQHgkVtrG6tWrhW7ixInxsKm4I+430dAP379/LwtS020RoPHevXvHjh179erVkydP7t+/zyW6sAvZxo0bEe9vKVZu9KqWDfPmzWM+3Ad95oZfVjNS3IdVfwt09YMjO8eNG6fqBDDcJ/hkk5yJf1o85cTF6u7duxCCR1V7DRAQgcOHD4uvRNL4macOVlvhmzBhQlNX9lTNQJDKYwDQ9A08sUGJ/B45cmS6iqcu7AT34sWLShMybktI3NtJYWYOD589e8aEzEFQJhIfZJFCX7BggZqmP421zYFI3rlzp5waEru4AWgGc/AJn0C5wNn48eMFh6WUnZvY1TEUKxx616JFi7QmbqQHiIM2TQQIOpHKpRQ9uzBIY83aU9okJ3EbBg4cmFZLD5+xqSPpIj90IfKhFlCIR1ZLemzZsoW94OOP+LBx+/ZtiUivCKiQRJ8Gvl24cGHXrl2CyQEa7FepWER/QPBWwvANaNzbYwOjGMXr8ePHd+7ciQJgjCYuMc2HmPCrm7OYsMDTaBraFLEh77dv3y64o6pVGmtsGMYKBtkcoEuXiHvy0NOzZ88eOXLErywXDVygHGeyMWct9QM0N9LB3E/uyVUpgH5pbGimXxPnrW2cTCIRF7FS7o2Ow9k+bWHr1q321U8miQ+n4yfQNhQEyR8OXL9+XXyUQXIUFHdEoxCBICIozARMd7KTwwpUbqhG16y4QBYNqIzDyWfEJQKtM6rTY0naVpKqPvYg0EAlrszBBBrSTEv3SBPLjMsxRgqpV72vTJ/EofvfqySwbIGYuOT8Vi0iFOJCwymVyRz0KcvOI4BjJp15XAi9NOVx3PWrFSgjSSnc7uRkmphEtn7kjlcABUHTMabOTjm01w9tbsaTuqC/jCYR2h0IJeX0t2PHjj179tiE6c2bN2/btk23Saxz7JH6uMcZeuRuazurjpCJSQ6CpYOJVb2P2Rw/43DwZaecRFYZ5Hk5KWlWTpZqI42eYNtplOEUioh7rPhE0+MbN27YatYou7acqzZrKTZLFQ07Y5uNdBg++3WfeJqGItZzPC0ICGaQuci5KIci9SrmV65cETQ6iacZZkokShnD2dAWgSSGIec0Ilm1cG04ZQQl7sHtGEQJak/eclzbiTnGzDUIIHOfJ3OrlQpOHxM0k16u++tClqeTQgm9zdp0cgkXOmmZA5lCebVCa/tRIu8D9q1bt05PVAAmJb1xgEaPSljDwctq0aVF6Dk2pC0Q1zFAFxB6VLyO7LQjN9IrGdaCBdZ5jjayLnCUg4kIOJbiBaGsULty5UpTSChyjsL9vWol7O3vA/DxgXm7Rdz8y2mE1b7VyiGnvGGk1XASWyaXkSlKst9OGihEqiySltDjVX4Tly2SEzt6paeII67JZk5xgJ9Gp2vE26zSnB0SPaa5lHcDDiCivYjTN5FNBUt2C1mZymk+oT8JENZd0CIHzCyNNdlPCVl/JT0E/nIs/GGE515Knenh5r+bVJ05cyZJkoHIc0S4kxpAKyVxXlmer1b9laBR3ldig1gOXkHf1OOANlkUCdogSJsXASTlMIezZDMi0ltzhs1JGPFHjx6FWAAhcB+jRm9ewZEdJZzhQ6Evh2Xo2T106BBzjCZ/WnMkp1byOBNB6Ev3TbNjO52LMd4fPHjQiADFnTRBTzN6ygtdcAd6akbZCT3ZvXv3psCCIMoRAXfaQBlw9bOjnHG+2L17NwdEr1RwmwPlnSatw8IWMRcyVdaa8PxG3r59+4CQBso3RZJRRWMaYhz+VC1/lRqymZQ2XgiJo6D+PpVxm3KymciXamX8pV8x53BlLjkgqv4Q1/xZJR+FBCHvXxIxHyYSfQZEkBuY6PTrQOKuBryUmdMuqBINsihQMBJP1tGQnluXzfGROb2IrPox+1UUSAwJO0HiWIAh86vzL3Pls4zSKYeNHLPS8gmL0s++zyQHuCEPofFLA2OofVYtzCVEHT+rpE9EfFi1UgyCINRk847VqemWTj8wlSwsJ5YY/vV3xdIP8iqYxp+Miu1ff59r+raV+vnHT5ot/8v3yh8P4V3/rthR/Lf9qPyfrb8EGACE/jY6oCFW9wAAAABJRU5ErkJggg==" />
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/regl.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script>
<script>
console.clear();

////////////
// CONFIG //
////////////

// Affects number of cubes generated
const DENSITY = 1;
const LAYERS = 5;
// Colors are in rgb format
const COLORS = [
	[1.000, 0.655, 0.231],
	[1.000, 0.365, 0.114],
	[0.898, 0.078, 0.392],
	[0.424, 0.5, 0.114]
];
const GAMMA = 1.8;
const CLEAR_COLOR = [0, 0, 0, 0];
// Time in seconds for all cubes to wrap around once.
const SCROLL_TIME = 10;
// Radians per second
const ROTATE_MIN = 0.5;
const ROTATE_MAX = 4.2;
// Meters
const SIZE_MIN = 0.032;
const SIZE_MAX = 0.064;
// Randomize placement (meters)
const OFFSET_JITTER = 0.025;
// Camera controls
const CAMERA_DISTANCE = 3.5;
const CAMERA_FOV = 0.7;
const CAMERA_NEAR = 1;
const CAMERA_FAR = 100;


////////////////////////
// COMPUTED CONSTANTS //
////////////////////////

// Number of cubes on each axis
const COUNT_X = Math.floor(32 * DENSITY);
const COUNT_Y = Math.floor(16 * DENSITY);
const COUNT_Z = Math.floor(LAYERS);
const COUNT_TOTAL = COUNT_X * COUNT_Y * COUNT_Z;
// Bounding volume dimensions (meters)
const BOUND_WIDTH = 2;
const BOUND_HEIGHT = COUNT_Y / COUNT_X * BOUND_WIDTH;
const BOUND_DEPTH = COUNT_Z / COUNT_X * BOUND_WIDTH;


//////////////////
// MATH HELPERS //
//////////////////

const TAU = Math.PI * 2;
const random = (min, max) => Math.random() * (max - min) + min;
const interpolate = (a, b, mix) => (b - a) * mix + a;


/////////////////
// APPLICATION //
/////////////////

const regl = createREGL({ extensions: ['angle_instanced_arrays'] });

const textTexture = regl.texture({
	format: 'rgb',
	data: document.querySelector('img'),
	mag: 'linear',
	min: 'linear'
});

const viewMatrix = mat4.fromTranslation([], [0, 0.25, -CAMERA_DISTANCE]);
const projectionMatrix = [];
const projectionViewMatrix = [];

// Gamma correct colors
COLORS.forEach(c => {
	c[0] = Math.pow(c[0], GAMMA);
	c[1] = Math.pow(c[1], GAMMA);
	c[2] = Math.pow(c[2], GAMMA);
});

// Color of each cube
const colors = new Float32Array(3 * COUNT_TOTAL);
// Position of each cube
const offsets = new Float32Array(3 * COUNT_TOTAL);
// Base scale of each cube
const scales = new Float32Array(COUNT_TOTAL);
// Axis of rotation for each cube
const rotationAxes = new Float32Array(3 * COUNT_TOTAL);
// Rotation angle for each cube
const angles = new Float32Array(COUNT_TOTAL);
// Rotation speed for each cube (radi.........完整代码请登录后点击上方下载按钮下载查看