ng-cw-v12
Version:
Angular UI Component Library
250 lines (241 loc) • 14.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('three'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/liquid-chrome-background', ['exports', '@angular/core', 'three', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["liquid-chrome-background"] = {}), global.ng.core, global.THREE, global.ng.common));
})(this, (function (exports, i0, THREE, common) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
var vertexShader = "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n";
var fragmentShader = "\n precision highp float;\n uniform float uTime;\n uniform vec3 uResolution;\n uniform vec3 uBaseColor;\n uniform float uAmplitude;\n uniform float uFrequencyX;\n uniform float uFrequencyY;\n uniform vec2 uMouse;\n varying vec2 vUv;\n\n vec4 renderImage(vec2 uvCoord) {\n vec2 fragCoord = uvCoord * uResolution.xy;\n vec2 uv = (2.0 * fragCoord - uResolution.xy) / min(uResolution.x, uResolution.y);\n\n for (float i = 1.0; i < 10.0; i++){\n uv.x += uAmplitude / i * cos(i * uFrequencyX * uv.y + uTime + uMouse.x * 3.14159);\n uv.y += uAmplitude / i * cos(i * uFrequencyY * uv.x + uTime + uMouse.y * 3.14159);\n }\n\n vec2 diff = (uvCoord - uMouse);\n float dist = length(diff);\n float falloff = exp(-dist * 20.0);\n float ripple = sin(10.0 * dist - uTime * 2.0) * 0.03;\n uv += (diff / (dist + 0.0001)) * ripple * falloff;\n\n vec3 color = uBaseColor / abs(sin(uTime - uv.y - uv.x));\n return vec4(color, 1.0);\n }\n\n void main() {\n vec4 col = vec4(0.0);\n int samples = 0;\n for (int i = -1; i <= 1; i++){\n for (int j = -1; j <= 1; j++){\n vec2 offset = vec2(float(i), float(j)) * (1.0 / min(uResolution.x, uResolution.y));\n col += renderImage(vUv + offset);\n samples++;\n }\n }\n gl_FragColor = col / float(samples);\n }\n";
var LiquidChromeBackgroundComponent = /** @class */ (function () {
function LiquidChromeBackgroundComponent(ngZone) {
var _this = this;
this.ngZone = ngZone;
/** 基础颜色数组 [r, g, b]（0-1） */
this.ncBaseColor = [0.1, 0.1, 0.1];
/** 动画运行速度（0-5） */
this.ncSpeed = 0.2;
/** 波动幅度（0.1-1） */
this.ncAmplitude = 0.3;
/** X轴波频 */
this.ncFrequencyX = 3;
/** Y轴波频 */
this.ncFrequencyY = 3;
/** 是否允许鼠标/触屏交互 */
this._interactive = true;
this.animationId = null;
this.mouse = new THREE__namespace.Vector2(0, 0);
this.update = function (t) {
_this.animationId = requestAnimationFrame(_this.update);
if (_this.material) {
_this.material.uniforms['uTime'].value = t * 0.001 * _this.ncSpeed;
}
_this.renderer.render(_this.scene, _this.camera);
};
}
Object.defineProperty(LiquidChromeBackgroundComponent.prototype, "ncInteractive", {
get: function () {
return this._interactive;
},
set: function (value) {
this._interactive = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
LiquidChromeBackgroundComponent.prototype.ngOnInit = function () { };
LiquidChromeBackgroundComponent.prototype.ngAfterViewInit = function () {
this.initWebGL();
};
LiquidChromeBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
LiquidChromeBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.material)
return;
if (changes['ncBaseColor'] && changes['ncBaseColor'].currentValue) {
this.material.uniforms['uBaseColor'].value.fromArray(this.ncBaseColor);
}
if (changes['ncAmplitude'] !== undefined) {
this.material.uniforms['uAmplitude'].value = this.ncAmplitude;
}
if (changes['ncFrequencyX'] !== undefined) {
this.material.uniforms['uFrequencyX'].value = this.ncFrequencyX;
}
if (changes['ncFrequencyY'] !== undefined) {
this.material.uniforms['uFrequencyY'].value = this.ncFrequencyY;
}
// ncInteractive handled via HostListener check
};
LiquidChromeBackgroundComponent.prototype.initWebGL = function () {
var _this = this;
var container = this.containerRef.nativeElement;
this.renderer = new THREE__namespace.WebGLRenderer({ antialias: true, alpha: true });
// 原版 jsx 清除颜色为白色
this.renderer.setClearColor(0xffffff, 1);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
container.appendChild(this.renderer.domElement);
this.scene = new THREE__namespace.Scene();
// 正交相机渲染全屏 Plane
this.camera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
this.camera.position.z = 1;
var geometry = new THREE__namespace.PlaneGeometry(2, 2);
this.material = new THREE__namespace.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: {
uTime: { value: 0 },
uResolution: { value: new THREE__namespace.Vector3() },
uBaseColor: { value: new THREE__namespace.Vector3().fromArray(this.ncBaseColor) },
uAmplitude: { value: this.ncAmplitude },
uFrequencyX: { value: this.ncFrequencyX },
uFrequencyY: { value: this.ncFrequencyY },
uMouse: { value: this.mouse }
}
});
this.mesh = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(this.mesh);
this.resizeObserver = new ResizeObserver(function () { return _this.resize(); });
this.resizeObserver.observe(container);
this.resize();
// Interaction handled via HostListener
// 提升性能，不让 requestAnimationFrame 触发 Angular 变更检测
this.ngZone.runOutsideAngular(function () {
_this.update(0);
});
};
LiquidChromeBackgroundComponent.prototype.resize = function () {
if (!this.containerRef || !this.renderer)
return;
var container = this.containerRef.nativeElement;
var width = container.offsetWidth;
var height = container.offsetHeight;
this.renderer.setSize(width, height);
this.material.uniforms['uResolution'].value.set(width, height, width / height);
};
LiquidChromeBackgroundComponent.prototype.onMouseMove = function (event) {
if (!this.ncInteractive || !this.containerRef)
return;
var container = this.containerRef.nativeElement;
var rect = container.getBoundingClientRect();
var x = (event.clientX - rect.left) / rect.width;
var y = 1 - (event.clientY - rect.top) / rect.height;
this.mouse.set(x, y);
};
LiquidChromeBackgroundComponent.prototype.onTouchMove = function (event) {
if (!this.ncInteractive || !this.containerRef)
return;
if (event.touches.length > 0) {
var touch = event.touches[0];
var container = this.containerRef.nativeElement;
var rect = container.getBoundingClientRect();
var x = (touch.clientX - rect.left) / rect.width;
var y = 1 - (touch.clientY - rect.top) / rect.height;
this.mouse.set(x, y);
}
};
LiquidChromeBackgroundComponent.prototype.cleanup = function () {
var _a, _b;
if (this.animationId !== null) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
if (this.mesh) {
this.mesh.geometry.dispose();
this.mesh.material.dispose();
this.scene.remove(this.mesh);
}
if (this.renderer) {
this.renderer.dispose();
var dom = this.renderer.domElement;
if (dom && dom.parentElement) {
dom.parentElement.removeChild(dom);
}
(_b = (_a = this.renderer.getContext()) === null || _a === void 0 ? void 0 : _a.getExtension('WEBGL_lose_context')) === null || _b === void 0 ? void 0 : _b.loseContext();
}
};
return LiquidChromeBackgroundComponent;
}());
LiquidChromeBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LiquidChromeBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
LiquidChromeBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LiquidChromeBackgroundComponent, selector: "nc-liquid-chrome-background", inputs: { ncBaseColor: "ncBaseColor", ncSpeed: "ncSpeed", ncAmplitude: "ncAmplitude", ncFrequencyX: "ncFrequencyX", ncFrequencyY: "ncFrequencyY", ncInteractive: "ncInteractive" }, host: { listeners: { "mousemove": "onMouseMove($event)", "touchmove": "onTouchMove($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-liquid-chrome-canvas-container\"></div>\r\n<div class=\"nc-content-wrapper\">\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.nc-liquid-chrome-canvas-container{position:absolute;inset:0;z-index:0}.nc-content-wrapper{position:relative;z-index:1;width:100%;height:100%}\n"] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LiquidChromeBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-liquid-chrome-background',
templateUrl: './liquid-chrome-background.component.html',
styleUrls: ['./liquid-chrome-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncBaseColor: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], ncAmplitude: [{
type: i0.Input
}], ncFrequencyX: [{
type: i0.Input
}], ncFrequencyY: [{
type: i0.Input
}], ncInteractive: [{
type: i0.Input
}], onMouseMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}], onTouchMove: [{
type: i0.HostListener,
args: ['touchmove', ['$event']]
}] } });
var NcLiquidChromeBackgroundModule = /** @class */ (function () {
function NcLiquidChromeBackgroundModule() {
}
return NcLiquidChromeBackgroundModule;
}());
NcLiquidChromeBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidChromeBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcLiquidChromeBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidChromeBackgroundModule, declarations: [LiquidChromeBackgroundComponent], imports: [common.CommonModule], exports: [LiquidChromeBackgroundComponent] });
NcLiquidChromeBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidChromeBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidChromeBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
LiquidChromeBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
LiquidChromeBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.LiquidChromeBackgroundComponent = LiquidChromeBackgroundComponent;
exports.NcLiquidChromeBackgroundModule = NcLiquidChromeBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-liquid-chrome-background.umd.js.map