three实现动态三维字母融合变形倒影动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：three实现动态三维字母融合变形倒影动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui,shrink-to-fit=no,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="description" content="Dynamic liquid letters with reflections">


  <link rel='stylesheet' href='https://fonts.googleapis.com'>
<link rel='stylesheet' href='https://fonts.gstatic.com'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cal+Sans&amp;display=swap'>
  
<style>
*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 12px;
	--color-text: #000;
	--color-bg: #52a0b2;
	--color-link: #000;
	--color-link-hover: #000;
	--page-padding: 1.5rem;
}

@font-face Cal Sans {
	font-family: "Cal Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100dvh;
	overflow: clip;
}

canvas {
	display: block; /* make the canvas act like a block   */
	width: 100%; /* make the canvas fill its container */
	height: 100%;
}

.warning-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 20px;
	border-radius: 10px;
	font-weight: bold;
	text-align: center;
	z-index: 1000;
	display: none;
}

.content {
	padding: var(--page-padding);
	display: flex;
	flex-direction: column;
	width: 100vw;
	position: relative;

	@media screen and (min-width: 53em) {
		min-height: 100dvh;
		justify-content: center;
		align-items: center;
	}
}
</style>


  
</head>

<body translate="no">
  <canvas style="cursor: -webkit-grabbing;"></canvas>
<div id="webgpu-warning" class="warning-message">
	WebGPU is not supported in your browser. Please try using the latest version of Chrome or Edge.
</div>
  
      <script type="module">
import * as THREE from "//unpkg.com/three?module";

var Gr = Object.defineProperty;
var Rr = (n, e, t) =>
	e in n
		? Gr(n, e, {
				enumerable: !0,
				configurable: !0,
				writable: !0,
				value: t
		  })
		: (n[e] = t);
var Pn = (n, e, t) => Rr(n, typeof e != "symbol" ? e + "" : e, t);
(function () {
	const e = document.createElement("link").relList;
	if (e && e.supports && e.supports("modulepreload")) return;
	for (const r of document.querySelectorAll('link[rel="modulepreload"]')) i(r);
	new MutationObserver((r) => {
		for (const o of r)
			if (o.type === "childList")
				for (const a of o.addedNodes)
					a.tagName === "LINK" && a.rel === "modulepreload" && i(a);
	}).observe(document, {
		childList: !0,
		subtree: !0
	});
	function t(r) {
		const o = {};
		return (
			r.integrity && (o.integrity = r.integrity),
			r.referrerPolicy && (o.referrerPolicy = r.referrerPolicy),
			r.crossOrigin === "use-credentials"
				? (o.credentials = "include")
				: r.crossOrigin === "anonymous"
				? (o.credentials = "omit")
				: (o.credentials = "same-origin"),
			o
		);
	}
	function i(r) {
		if (r.ep) return;
		r.ep = !0;
		const o = t(r);
		fetch(r.href, o);
	}
})();
function nr(n, e) {
	n = n.split(";");
	let t = [];
	const i = /group\(([^)]+)\)/,
		r = /binding\(([^)]+)\)/;
	return (
		n.forEach((o, a) => {
			if (o.includes("@group")) {
				const s = Number(i.exec(o)[1]),
					u = Number(r.exec(o)[1]);
				if (
					(t[s] == null && (t[s] = []),
					o.includes("uniform") || o.includes("storage"))
				) {
					let c = "";
					o.includes("storage") &&
						(c = o.includes("read_write") ? "storage" : "read-only-storage"),
						o.includes("uniform") && (c = "uniform"),
						(t[s][u] = {
							binding: u,
							visibility: e,
							buffer: {
								type: c
							}
						});
				}
				if (o.includes("texture_")) {
					let c = "2d";
					if (
						(o.includes("_3d") && (c = "3d"),
						o.includes("_1d") && (c = "1d"),
						o.includes("_2d") && o.includes("array") && (c = "2d-array"),
						o.includes("texture_storage"))
					)
						t[s][u] = {
							binding: u,
							visibility: e,
							storageTexture: {
								format: o.includes("unorm") ? "rgba8unorm" : "rgba32float",
								viewDimension: c
							}
						};
					else {
						let m = "float",
							p = "2d";
						o.includes("texture_3d") && (p = "3d"),
							o.includes("texture_1d") && (p = "1d"),
							o.includes("_2d") && o.includes("array") && (p = "2d-array"),
							(t[s][u] = {
								binding: u,
								visibility: e,
								texture: {
									sampleType: m,
									viewDimension: p
								}
							});
					}
				}
				o.includes("sampler") &&
					(t[s][u] = {
						binding: u,
						visibility: e,
						sampler: {
							type: "filtering"
						}
					});
			}
		}),
		t
	);
}
Promise.create = function () {
	const n = new Promise((e, t) => {
		(this.temp_resolve = e), (this.temp_reject = t);
	});
	return (
		(n.resolve = this.temp_resolve),
		(n.reject = this.temp_reject),
		delete this.temp_resolve,
		delete this.temp_reject,
		n
	);
};
var G = null;
let kr = async (n) => {
		var t;
		const e = await ((t = navigator.gpu) == null ? void 0 : t.requestAdapter());
		return (
			(G = await (e == null
				? void 0
				: e.requestDevice({
						requiredFeatures: ["float32-filterable"]
				  }))),
			G || (console.log("error finding device"), null)
		);
	},
	rr = async (n) => {
		try {
			return await (await fetch(n)).text();
		} catch {
			return n;
		}
	},
	Oe = async (n) => {
		const e = await rr(n),
			t = G.createShaderModule({
				label: `${n} module`,
				code: e
			}),
			r = nr(e, GPUShaderStage.COMPUTE).map((s) =>
				G.createBindGroupLayout({
					entries: s
				})
			),
			o = G.createPipelineLayout({
				bindGroupLayouts: r
			});
		return {
			pipeline: G.createComputePipeline({
				label: `${n} pipeline`,
				layout: o,
				compute: {
					module: t,
					entryPoint: "main"
				}
			})
		};
	};
class ir {
	constructor() {
		Pn(this, "setBindGroup", (e) => {
			this.bindGroup = G.createBindGroup({
				label: `${this.label} bind group`,
				layout: this.pipeline.getBindGroupLayout(0),
				entries: e
			});
		});
		(this.label = null),
			(this.passDescriptor = null),
			(this.pipeline = null),
			(this.bindGroup = null),
			(this.uniformsData = null),
			(this.uniformsBuffer = null);
	}
}
async function gn(n, e, t = 1, i, r = !0) {
	let o = new ir();
	const a = await rr(e),
		s = G.createShaderModule({
			label: `${n} module`,
			code: a
		}),
		c = nr(a, GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT).map((h) =>
			G.createBindGroupLayout({
				entries: h
			})
		),
		m = G.createPipelineLayout({
			bindGroupLayouts: c
		});
	let p = {
		label: `${n} pipeline`,
		layout: m,
		vertex: {
			module: s,
			entryPoint: "vs"
		},
		fragment: {
			module: s,
			entryPoint: "fs",
			targets: i
		},
		primitive: {
			topology: "triangle-list",
			cullMode: "none"
		},
		multisample: {
			count: t
		}
	};
	const d = {
		label: `${n} rendering pass descriptor`,
		colorAttachments: []
	};
	r &&
		((p.depthStencil = {
			depthWriteEnabled: !0,
			depthCompare: "less",
			format: "depth32float"
		}),
		(d.depthStencilAttachment = {
			depthClearValue: 1,
			depthStoreOp: "store"
		}));
	const g = G.createRenderPipeline(p);
	return (
		i.map((h) => {
			d.colorAttachments.push({
				clearValue: [0, 0, 0, 0],
				storeOp: "store"
			});
		}),
		(o.label = n),
		(o.pipeline = g),
		(o.passDescriptor = d),
		o
	);
}
async function re(n, e, t = null, i = null) {
	let r = new ir(),
		o = Promise.create();
	if (
		(Oe(e).then((a) => {
			(r.pipeline = a.pipeline), o.resolve();
		}),
		await o,
		(r.label = n),
		t &&
			((r.uniformsData = new Float32Array(t)),
			(r.uniformsBuffer = G.createBuffer({
				label: `${n} uniforms buffer`,
				size: r.uniformsData.byteLength,
				usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
			})),
			G.queue.writeBuffer(r.uniformsBuffer, 0, r.uniformsData)),
		i)
	) {
		let a = i.map((s, u) => ({
			binding: u,
			resource: {
				buffer: s == "uniforms" ? r.uniformsBuffer : s
			}
		}));
		r.bindGroup = G.createBindGroup({
			label: `${n} bind group`,
			layout: r.pipeline.getBindGroupLayout(0),
			entries: a
		});
	}
	return console.log(`${n} ready`), r;
}
var Lr = `struct Uniforms {
    axis: vec3f,
    steps: f32
}

@group(0) @binding(0) var textureRead: texture_3d<f32>;
@group(0) @binding(1) var textureSave: texture_storage_3d<rgba32float, write>;
@group(0) @binding(2) var<uniform> uniforms: Uniforms;

@compute @workgroup_size(1) fn main( @builtin(global_invocation_id) ud: vec3<u32> ) {
    

    var tSize = vec3f(textureDimensions(textureRead));
    var id = ud + vec3u( u32(tSize.x * 0.2), 0, 0);

    var blend = vec4f(0.);
    var blend2 = vec4f(0.);
    var sum = 1.;
    var sum2 = 0.;
    var m = 1.;
    var n = uniforms.steps;
    for(var i = 0.; i < uniforms.steps; i += 1.) {
        var j = i - 0.5 * uniforms.steps;
        var tRead = textureLoad(textureRead, vec3<i32>(id) + vec3<i32>(j * uniforms.axis), 0);
        blend += m * tRead;
        blend2 += tRead;
        m *= (n - i) / (i + 1.);
        sum += m;
        sum2 += 1.;
    }    

    blend /= sum;
    blend2 /= sum2;

    var mixer = 1.;
    blend = mixer * blend + (1. - mixer) * blend2;
    
    textureStore(textureSave, id, blend );

}`;
let Sn = !1,
	kt,
	Kt = [];
const zr = (n) => {
	let e = [
		[1, 0, 0, 1],
		[0, 0, 1, 1],
		[0, 1, 0, 1]
	];
	for (let t = 0; t < 3; t++) {
		let i = new Float32Array(e[t]),
			r = n.createBuffer({
				label: "uniforms buffer",
				size: i.byteLength,
				usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
			});
		n.queue.writeBuffer(r, 0, i), Kt.push(r);
	}
};
async function Mr(n, e, t) {
	let i = G;
	if (!Sn) {
		zr(i);
		let d = Promise.create();
		Oe(Lr).then((g) => {
			(kt = g.pipeline), d.resolve();
		}),
			await d,
			(Sn = !0);
	}
	let r = t * 2,
		o = [
			[1, 0, 0, r],
			[0, 0, 1, r],
			[0, 1, 0, r]
		];
	for (let d = 0; d < 3; d++) {
		let g = new Float32Array(o[d]);
		i.queue.writeBuffer(Kt[d], 0, g);
	}
	const a = i.createCommandEncoder({
			label: "encoder"
		}),
		s = a.beginComputePass({
			label: "blur3D pass"
		});
	s.setPipeline(kt);
	let u = n.width,
		c,
		m;
	for (let d = 0; d < 3; d++) {
		let g = d % 2 == 0;
		(c = g ? n : e), (m = g ? e : n);
		const h = i.createBindGroup({
			label: "bind group for blur3D",
			layout: kt.getBindGroupLayout(0),
			entries: [
				{
					binding: 0,
					resource: c.createView({
						baseMipLevel: 0,
						mipLevelCount: 1
					})
				},
				{
					binding: 1,
					resource: m.createView({
						baseMipLevel: 0,
						mipLevelCount: 1
					})
				},
				{
					binding: 2,
					resource: {
						buffer: Kt[d]
					}
				}
			]
		});
		s.setBindGroup(0, h), s.dispatchWorkgroups(u * 0.6, u, u);
	}
	s.end();
	const p = a.finish();
	i.queue.submit([p]);
}
var at = typeof Float32Array < "u" ? Float32Array : Array;
Math.hypot ||
	(Math.hypot = function () {
		for (var n = 0, e = arguments.length; e--; ) n += arguments[e] * arguments[e];
		return Math.sqrt(n);
	});
function $() {
	var n = new at(16);
	return (
		at != Float32Array &&
			((n[1] = 0),
			(n[2] = 0),
			(n[3] = 0),
			(n[4] = 0),
			(n[6] = 0),
			(n[7] = 0),
			(n[8] = 0),
			(n[9] = 0),
			(n[11] = 0),
			(n[12] = 0),
			(n[13] = 0),
			(n[14] = 0)),
		(n[0] = 1),
		(n[5] = 1),
		(n[10] = 1),
		(n[15] = 1),
		n
	);
}
function Cn(n, e) {
	var t = e[0],
		i = e[1],
		r = e[2],
		o = e[3],
		a = e[4],
		s = e[5],
		u = e[6],
		c = e[7],
		m = e[8],
		p = e[9],
		d = e[10],
		g = e[11],
		h = e[12],
		v = e[13],
		w = e[14],
		E = e[15],
		L = t * s - i * a,
		b = t * u - r * a,
		x = t * c - o * a,
		y = i * u - r * s,
		S = i * c - o * s,
		Le = r * c - o * u,
		ze = m * v - p * h,
		Me = m * w - d * h,
		Ie = m * E - g * h,
		Ne = p * w - d * v,
		Fe = p * E - g * v,
		Ve = d * E - g * w,
		O = L * Ve - b * Fe + x * Ne + y * Ie - S * Me + Le * ze;
	return O
		? ((O = 1 / O),
		  (n[0] = (s * Ve - u * Fe + c * Ne) * O),
		  (n[1] = (r * Fe - i * Ve - o * Ne) * O),
		  (n[2] = (v * Le - w * S + E * y) * O),
		  (n[3] = (d * S - p * Le - g * y) * O),
		  (n[4] = (u * Ie - a * Ve - c * Me) * O),
		  (n[5] = (t * Ve - r * Ie + o * Me) * O),
		  (n[6] = (w * x - h * Le - E * b) * O),
		  (n[7] = (m * Le - d * x + g * b) * O),
		  (n[8] = (a * Fe - s * Ie + c * ze) * O),
		  (n[9] = (i * Ie - t * Fe - o * ze) * O),
		  (n[10] = (h * S - v * x + E * L) * O),
		  (n[11] = (p * x - m * S - g * L) * O),
		  (n[12] = (s * Me - a * Ne - u * ze) * O),
		  (n[13] = (t * Ne - i * Me + r * ze) * O),
		  (n[14] = (v * b - h * y - w * L) * O),
		  (n[15] = (m * y - p * b + d * L) * O),
		  n)
		: null;
}
function Jt(n, e, t) {
	var i = e[0],
		r = e[1],
		o = e[2],
		a = e[3],
		s = e[4],
		u = e[5],
		c = e[6],
		m = e[7],
		p = e[8],
		d = e[9],
		g = e[10],
		h = e[11],
		v = e[12],
		w = e[13],
		E = e[14],
		L = e[15],
		b = t[0],
		x = t[1],
		y = t[2],
		S = t[3];
	return (
		(n[0] = b * i + x * s + y * p + S * v),
		(n[1] = b * r + x * u + y * d + S * w),
		(n[2] = b * o + x * c + y * g + S * E),
		(n[3] = b * a + x * m + y * h + S * L),
		(b = t[4]),
		(x = t[5]),
		(y = t[6]),
		(S = t[7]),
		(n[4] = b * i + x * s + y * p + S * v),
		(n[5] = b * r + x * u + y * d + S * w),
		(n[6] = b * o + x * c + y * g + S * E),
		(n[7] = b * a + x * m + y * h + S * L),
		(b = t[8]),
		(x = t[9]),
		(y = t[10]),
		(S = t[11]),
		(n[8] = b * i + x * s + y * p + S * v),
		(n[9] = b * r + x * u + y * d + S * w),
		(n[10] = b * o + x * c + y * g + S * E),
		(n[11] = b * a + x * m + y * h + S * L),
		(b = t[12]),
		(x = t[13]),
		(y = t[14]),
		(S = t[15]),
		(n[12] = b * i + x * s + y * p + S * v),
		(n[13] = b * r + x * u + y * d + S * w),
		(n[14] = b * o + x * c + y * g + S * E),
		(n[15] = b * a + x * m + y * h + S * L),
		n
	);
}
function Ir(n, e, t, i, r) {
	var o = 1 / Math.tan(e / 2),
		a;
	return (
		(n[0] = o / t),
		(n[1] = 0),
		(n[2] = 0),
		(n[3] = 0),
		(n[4] = 0),
		(n[5] = o),
		(n[6] = 0),
		(n[7] = 0),
		(n[8] = 0),
		(n[9] = 0),
		(n[11] = -1),
		(n[12] = 0),
		(n[13] = 0),
		(n[15] = 0),
		r != null && r !== 1 / 0
			? ((a = 1 / (i - r)), (n[10] = (r + i) * a), (n[14] = 2 * r * i * a))
			: ((n[10] = -1), (n[14] = -2 * i)),
		n
	);
}
var Nr = Ir;
function U() {
	var n = new at(3);
	return at != Float32Array && ((n[0] = 0), (n[1] = 0), (n[2] = 0)), n;
}
function ae(n, e, t) {
	var i = new at(3);
	return (i[0] = n), (i[1] = e), (i[2] = t), i;
}
function Zt(n, e, t) {
	return (n[0] = e[0] + t[0]), (n[1] = e[1] + t[1]), (n[2] = e[2] + t[2]), n;
}
function $e(n, e, t) {
	return (n[0] = e[0] - t[0]), (n[1] = e[1] - t[1]), (n[2] = e[2] - t[2]), n;
}
function _e(n, e, t) {
	return (n[0] = e[0] * t), (n[1] = e[1] * t), (n[2] = e[2] * t), n;
}
function Tn(n, e) {
	return (n[0] = -e[0]), (n[1] = -e[1]), (n[2] = -e[2]), n;
}
function Xe(n, e) {
	var t = e[0],
		i = e[1],
		r = e[2],
		o = t * t + i * i + r * r;
	return (
		o > 0 && (o = 1 / Math.sqrt(o)),
		(n[0] = e[0] * o),
		(n[1] = e[1] * o),
		(n[2] = e[2] * o),
		n
	);
}
function I(n, e) {
	return n[0] * e[0] + n[1] * e[1] + n[2] * e[2];
}
function En(n, e, t) {
	var i = e[0],
		r = e[1],
		o = e[2],
		a = t[0],
		s = t[1],
		u = t[2];
	return (
		(n[0] = r * u - o * s), (n[1] = o * a - i * u), (n[2] = i * s - r * a), n
	);
}
function lt(n, e, t) {
	var i = e[0],
		r = e[1],
		o = e[2],
		a = t[3] * i + t[7] * r + t[11] * o + t[15];
	return (
		(a = a || 1),
		(n[0] = (t[0] * i + t[4] * r + t[8] * o + t[12]) / a),
		(n[1] = (t[1] * i + t[5] * r + t[9] * o + t[13]) / a),
		(n[2] = (t[2] * i + t[6] * r + t[10] * o + t[14]) / a),
		n
	);
}
var be = $e;
(function () {
	var n = U();
	return function (e, t, i, r, o, a) {
		var s, u;
		for (
			t || (t = 3),
				i || (i = 0),
				r ? (u = Math.min(r * t + i, e.length)) : (u = e.length),
				s = i;
			s < u;
			s += t
		)
			(n[0] = e[s]),
				(n[1] = e[s + 1]),
				(n[2] = e[s + 2]),
				o(n, n, a),
				(e[s] = n[0]),
				(e[s + 1] = n[1]),
				(e[s + 2] = n[2]);
		return e;
	};
})();
class Fr {
	constructor(e) {
		(this.block = !1),
			(this.position = U()),
			(this.down = !1),
			(this.prevMouseX = 0),
			(this.prevMouseY = 0),
			(this.currentMouseX = 0),
			(this.currentMouseY = 0),
			(this.alpha = Math.PI * 0.5),
			(this.beta = -Math.PI * 0.5),
			(this._alpha = this.alpha),
			(this._beta = this.beta),
			(this._alpha2 = this.alpha),
			(this._beta2 = this.beta),
			(this.gaze = !0),
			(this.ratio = 1),
			(this.init = !0),
			(this.target = [0.5, 0.35, 0.5]),
			(this.lerp = 0.1),
			(this.lerp2 = 0.1),
			(this.perspectiveMatrix = $()),
			(this.cameraTransformMatrix = $()),
			(this.orientationMatrix = $()),
			(this.transformMatrix = $()),
			(this.transformMatrixReflection = $()),
			(e.style.cursor = "-moz-grab"),
			(e.style.cursor = " -webkit-grab"),
			document.addEventListener(
				"mousemove",
				(t) => {
					(this.currentMouseX = t.clientX), (this.currentMouseY = t.clientY);
				},
				!1
			),
			document.addEventListener(
				"mousedown",
				(t) => {
					(e.style.cursor = "-moz-grabbing"),
						(e.style.cursor = " -webkit-grabbing"),
						(this.down = !0);
				},
				!1
			),
			document.addEventListener(
				"mouseup",
				(t) => {
					(e.style.cursor = "-moz-grab"),
						(e.style.cursor = " -webkit-grab"),
						(this.down = !1);
				},
				!1
			);
	}
	updateCamera(e, t, i) {
		if (
			((this.ratio = i),
			Nr(this.perspectiveMatrix, (e * Math.PI) / 180, t, 0.01, 1e3),
			this.block ||
				(this.down &&
					((this.alpha -=
						(0.1 * (this.currentMouseY - this.prevMouseY) * Math.PI) / 180),
					(this.beta +=
						(0.1 * (this.currentMouseX - this.prevMouseX) * Math.PI) / 180)),
				this.alpha <= 0.3 * Math.PI && (this.alpha = 0.3 * Math.PI),
				this.alpha >= 0.52 * Math.PI && (this.alpha = 0.52 * Math.PI),
				this.beta > -0.1 * Math.PI && (this.beta = -0.1 * Math.PI),
				this.beta < -0.9 * Math.PI && (this.beta = -0.9 * Math.PI)),
			(this.lerp = this.down ? 0.2 : 0.05),
			(this.lerp2 += (this.lerp - this.lerp2) * 0.15),
			this._alpha.........完整代码请登录后点击上方下载按钮下载查看