ng-cw-v12
Version:
Angular UI Component Library
313 lines (304 loc) • 17.4 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/iridescence-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"]["iridescence-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 = "\nattribute vec3 position;\nattribute vec2 uv;\n\nvarying vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n";
// ─── 片元着色器 ─────────────────────────────────────────────────────────────
var fragmentShader = "\nprecision highp float;\n\nuniform float uTime;\nuniform vec3 uColor;\nuniform vec3 uResolution;\nuniform vec2 uMouse;\nuniform float uAmplitude;\nuniform float uSpeed;\n\nvarying vec2 vUv;\n\nvoid main() {\n float mr = min(uResolution.x, uResolution.y);\n vec2 uv = (vUv.xy * 2.0 - 1.0) * uResolution.xy / mr;\n\n uv += (uMouse - vec2(0.5)) * uAmplitude;\n\n float d = -uTime * 0.5 * uSpeed;\n float a = 0.0;\n for (float i = 0.0; i < 8.0; ++i) {\n a += cos(i - d - a * uv.x);\n d += sin(uv.y * i + a);\n }\n d += uTime * 0.5 * uSpeed;\n vec3 col = vec3(cos(uv * vec2(d, a)) * 0.6 + 0.4, cos(a + d) * 0.5 + 0.5);\n col = cos(col * cos(vec3(d, a, 2.5)) * 0.5 + 0.5) * uColor;\n gl_FragColor = vec4(col, 1.0);\n}\n";
var IridescenceBackgroundComponent = /** @class */ (function () {
function IridescenceBackgroundComponent(ngZone) {
this.ngZone = ngZone;
/** 颜色 [r, g, b] 数组（0-1） */
this.ncColor = [0.5, 0.6, 0.8];
/** 动画速度倍率（0-2） */
this.ncSpeed = 1.0;
/** 鼠标驱动效应的振幅 */
this.ncAmplitude = 0.1;
/** 是否响应鼠标操作 */
this._mouseReact = true;
this.renderer = null;
this.scene = null;
this.camera = null;
this.material = null;
this.mesh = null;
this.rafId = null;
this.resizeRafId = null;
this.isVisible = true;
this.mousePos = new THREE__namespace.Vector2(0.5, 0.5);
}
Object.defineProperty(IridescenceBackgroundComponent.prototype, "ncMouseReact", {
get: function () {
return this._mouseReact;
},
set: function (val) {
this._mouseReact = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
IridescenceBackgroundComponent.prototype.ngOnInit = function () { };
IridescenceBackgroundComponent.prototype.ngAfterViewInit = function () {
this.initWebGL();
};
IridescenceBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
IridescenceBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.material)
return;
if (changes['ncColor']) {
this.material.uniforms['uColor'].value.setRGB(this.ncColor[0], this.ncColor[1], this.ncColor[2]);
}
if (changes['ncSpeed']) {
this.material.uniforms['uSpeed'].value = this.ncSpeed;
}
if (changes['ncAmplitude']) {
this.material.uniforms['uAmplitude'].value = this.ncAmplitude;
}
};
// ─── 初始化 WebGL ──────────────────────────────────────────────────────────
IridescenceBackgroundComponent.prototype.initWebGL = function () {
var _this = this;
var container = this.containerRef.nativeElement;
this.renderer = new THREE__namespace.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setClearColor(0xffffff, 1);
// 限定最大 dpr，避免在超高分辨率屏幕上性能过低
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
container.appendChild(this.renderer.domElement);
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.Camera(); // 空相机，不使用投影矩阵
var geometry = new THREE__namespace.PlaneGeometry(2, 2);
this.material = new THREE__namespace.RawShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: {
uTime: { value: 0 },
uColor: { value: new THREE__namespace.Color(this.ncColor[0], this.ncColor[1], this.ncColor[2]) },
uResolution: { value: new THREE__namespace.Vector3() },
uMouse: { value: this.mousePos },
uAmplitude: { value: this.ncAmplitude },
uSpeed: { value: this.ncSpeed }
}
});
this.mesh = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(this.mesh);
this.setupResizeObserver(container);
this.setupIntersectionObserver(container);
this.resize();
this.ngZone.runOutsideAngular(function () {
_this.startAnimation();
});
};
// ─── Resize 处理 ──────────────────────────────────────────────────────────
IridescenceBackgroundComponent.prototype.resize = function () {
var container = this.containerRef.nativeElement;
if (!container || !this.renderer || !this.material)
return;
var width = container.offsetWidth;
var height = container.offsetHeight;
this.renderer.setSize(width, height);
var canvas = this.renderer.domElement;
this.material.uniforms['uResolution'].value.set(canvas.width, canvas.height, canvas.width / canvas.height);
};
IridescenceBackgroundComponent.prototype.setupResizeObserver = function (container) {
var _this = this;
this.resizeObserver = new ResizeObserver(function () {
if (_this.resizeRafId !== null)
cancelAnimationFrame(_this.resizeRafId);
_this.ngZone.runOutsideAngular(function () {
_this.resizeRafId = requestAnimationFrame(function () {
_this.resize();
_this.resizeRafId = null;
});
});
});
this.resizeObserver.observe(container);
};
// ─── 渲染循环 ─────────────────────────────────────────────────────────────
IridescenceBackgroundComponent.prototype.startAnimation = function () {
var _this = this;
var update = function (t) {
_this.rafId = requestAnimationFrame(update);
if (_this.isVisible && _this.renderer && _this.scene && _this.camera && _this.material) {
_this.material.uniforms['uTime'].value = t * 0.001;
_this.renderer.render(_this.scene, _this.camera);
}
};
update(performance.now());
};
IridescenceBackgroundComponent.prototype.stopAnimation = function () {
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
this.rafId = null;
}
};
// ─── IntersectionObserver：不可见时暂停渲染以节省性能 ────────────────────
IridescenceBackgroundComponent.prototype.setupIntersectionObserver = function (container) {
var _this = this;
this.intersectionObserver = new IntersectionObserver(function (entries) {
var entry = entries[0];
_this.isVisible = entry.isIntersecting && entry.intersectionRatio > 0;
}, { threshold: [0, 0.01, 0.1] });
this.intersectionObserver.observe(container);
};
// ─── 清理资源 ─────────────────────────────────────────────────────────────
IridescenceBackgroundComponent.prototype.cleanup = function () {
var _a, _b;
this.stopAnimation();
if (this.resizeRafId !== null) {
cancelAnimationFrame(this.resizeRafId);
this.resizeRafId = null;
}
try {
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
}
catch (e) {
void 0;
}
try {
(_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
}
catch (e) {
void 0;
}
if (this.renderer) {
var canvas = this.renderer.domElement;
if (canvas && canvas.parentNode) {
canvas.parentNode.removeChild(canvas);
}
this.renderer.dispose();
}
if (this.material) {
this.material.dispose();
}
if (this.mesh && this.mesh.geometry) {
this.mesh.geometry.dispose();
}
this.renderer = null;
this.scene = null;
this.camera = null;
this.material = null;
this.mesh = null;
};
// ─── HostListeners for Mouse Interaction ─────────────────────────────────
IridescenceBackgroundComponent.prototype.onMouseMove = function (event) {
if (!this.ncMouseReact || !this.material || !this.containerRef)
return;
var container = this.containerRef.nativeElement;
var rect = container.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0)
return;
// 检查是否在容器内
if (event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom) {
return;
}
var x = (event.clientX - rect.left) / rect.width;
var y = 1.0 - (event.clientY - rect.top) / rect.height;
// 更新 THREE.Vector2
this.mousePos.set(x, y);
};
IridescenceBackgroundComponent.prototype.onTouchMove = function (event) {
if (!this.ncMouseReact || !this.material || !this.containerRef || event.touches.length === 0)
return;
var container = this.containerRef.nativeElement;
var rect = container.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0)
return;
var touch = event.touches[0];
// 检查是否在容器内
if (touch.clientX < rect.left ||
touch.clientX > rect.right ||
touch.clientY < rect.top ||
touch.clientY > rect.bottom) {
return;
}
var x = (touch.clientX - rect.left) / rect.width;
var y = 1.0 - (touch.clientY - rect.top) / rect.height;
// 更新 THREE.Vector2
this.mousePos.set(x, y);
};
return IridescenceBackgroundComponent;
}());
IridescenceBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: IridescenceBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
IridescenceBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: IridescenceBackgroundComponent, selector: "nc-iridescence-background", inputs: { ncColor: "ncColor", ncSpeed: "ncSpeed", ncAmplitude: "ncAmplitude", ncMouseReact: "ncMouseReact" }, 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-iridescence-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-iridescence-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: IridescenceBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-iridescence-background',
templateUrl: './iridescence-background.component.html',
styleUrls: ['./iridescence-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncColor: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], ncAmplitude: [{
type: i0.Input
}], ncMouseReact: [{
type: i0.Input
}], onMouseMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}], onTouchMove: [{
type: i0.HostListener,
args: ['touchmove', ['$event']]
}] } });
var NcIridescenceBackgroundModule = /** @class */ (function () {
function NcIridescenceBackgroundModule() {
}
return NcIridescenceBackgroundModule;
}());
NcIridescenceBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcIridescenceBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcIridescenceBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcIridescenceBackgroundModule, declarations: [IridescenceBackgroundComponent], imports: [common.CommonModule], exports: [IridescenceBackgroundComponent] });
NcIridescenceBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcIridescenceBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcIridescenceBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
IridescenceBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
IridescenceBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.IridescenceBackgroundComponent = IridescenceBackgroundComponent;
exports.NcIridescenceBackgroundModule = NcIridescenceBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-iridescence-background.umd.js.map