ng-cw-v12
Version:
Angular UI Component Library
354 lines (345 loc) • 21.8 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/orb-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"]["orb-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 vert = "\n precision highp float;\n attribute vec3 position;\n attribute vec2 uv;\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n }\n";
var frag = "\n precision highp float;\n\n uniform float iTime;\n uniform vec3 iResolution;\n uniform float hue;\n uniform float hover;\n uniform float rot;\n uniform float hoverIntensity;\n uniform vec3 backgroundColor;\n varying vec2 vUv;\n\n vec3 rgb2yiq(vec3 c) {\n float y = dot(c, vec3(0.299, 0.587, 0.114));\n float i = dot(c, vec3(0.596, -0.274, -0.322));\n float q = dot(c, vec3(0.211, -0.523, 0.312));\n return vec3(y, i, q);\n }\n \n vec3 yiq2rgb(vec3 c) {\n float r = c.x + 0.956 * c.y + 0.621 * c.z;\n float g = c.x - 0.272 * c.y - 0.647 * c.z;\n float b = c.x - 1.106 * c.y + 1.703 * c.z;\n return vec3(r, g, b);\n }\n \n vec3 adjustHue(vec3 color, float hueDeg) {\n float hueRad = hueDeg * 3.14159265 / 180.0;\n vec3 yiq = rgb2yiq(color);\n float cosA = cos(hueRad);\n float sinA = sin(hueRad);\n float i = yiq.y * cosA - yiq.z * sinA;\n float q = yiq.y * sinA + yiq.z * cosA;\n yiq.y = i;\n yiq.z = q;\n return yiq2rgb(yiq);\n }\n\n vec3 hash33(vec3 p3) {\n p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));\n p3 += dot(p3, p3.yxz + 19.19);\n return -1.0 + 2.0 * fract(vec3(\n p3.x + p3.y,\n p3.x + p3.z,\n p3.y + p3.z\n ) * p3.zyx);\n }\n\n float snoise3(vec3 p) {\n const float K1 = 0.333333333;\n const float K2 = 0.166666667;\n vec3 i = floor(p + (p.x + p.y + p.z) * K1);\n vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);\n vec3 e = step(vec3(0.0), d0 - d0.yzx);\n vec3 i1 = e * (1.0 - e.zxy);\n vec3 i2 = 1.0 - e.zxy * (1.0 - e);\n vec3 d1 = d0 - (i1 - K2);\n vec3 d2 = d0 - (i2 - K1);\n vec3 d3 = d0 - 0.5;\n vec4 h = max(0.6 - vec4(\n dot(d0, d0),\n dot(d1, d1),\n dot(d2, d2),\n dot(d3, d3)\n ), 0.0);\n vec4 n = h * h * h * h * vec4(\n dot(d0, hash33(i)),\n dot(d1, hash33(i + i1)),\n dot(d2, hash33(i + i2)),\n dot(d3, hash33(i + 1.0))\n );\n return dot(vec4(31.316), n);\n }\n\n vec4 extractAlpha(vec3 colorIn) {\n float a = max(max(colorIn.r, colorIn.g), colorIn.b);\n return vec4(colorIn.rgb / (a + 1e-5), a);\n }\n\n const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);\n const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);\n const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);\n const float innerRadius = 0.6;\n const float noiseScale = 0.65;\n\n float light1(float intensity, float attenuation, float dist) {\n return intensity / (1.0 + dist * attenuation);\n }\n float light2(float intensity, float attenuation, float dist) {\n return intensity / (1.0 + dist * dist * attenuation);\n }\n\n vec4 draw(vec2 uv) {\n vec3 color1 = adjustHue(baseColor1, hue);\n vec3 color2 = adjustHue(baseColor2, hue);\n vec3 color3 = adjustHue(baseColor3, hue);\n \n float ang = atan(uv.y, uv.x);\n float len = length(uv);\n float invLen = len > 0.0 ? 1.0 / len : 0.0;\n\n float bgLuminance = dot(backgroundColor, vec3(0.299, 0.587, 0.114));\n \n float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;\n float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);\n float d0 = distance(uv, (r0 * invLen) * uv);\n float v0 = light1(1.0, 10.0, d0);\n\n v0 *= smoothstep(r0 * 1.05, r0, len);\n float innerFade = smoothstep(r0 * 0.8, r0 * 0.95, len);\n v0 *= mix(innerFade, 1.0, bgLuminance * 0.7);\n float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;\n \n float a = iTime * -1.0;\n vec2 pos = vec2(cos(a), sin(a)) * r0;\n float d = distance(uv, pos);\n float v1 = light2(1.5, 5.0, d);\n v1 *= light1(1.0, 50.0, d0);\n \n float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);\n float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);\n \n vec3 colBase = mix(color1, color2, cl);\n float fadeAmount = mix(1.0, 0.1, bgLuminance);\n \n vec3 darkCol = mix(color3, colBase, v0);\n darkCol = (darkCol + v1) * v2 * v3;\n darkCol = clamp(darkCol, 0.0, 1.0);\n \n vec3 lightCol = (colBase + v1) * mix(1.0, v2 * v3, fadeAmount);\n lightCol = mix(backgroundColor, lightCol, v0);\n lightCol = clamp(lightCol, 0.0, 1.0);\n \n vec3 finalCol = mix(darkCol, lightCol, bgLuminance);\n \n return extractAlpha(finalCol);\n }\n\n vec4 mainImage(vec2 fragCoord) {\n vec2 center = iResolution.xy * 0.5;\n float size = min(iResolution.x, iResolution.y);\n vec2 uv = (fragCoord - center) / size * 2.0;\n \n float angle = rot;\n float s = sin(angle);\n float c = cos(angle);\n uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);\n \n uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);\n uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);\n \n return draw(uv);\n }\n\n void main() {\n vec2 fragCoord = vUv * iResolution.xy;\n vec4 col = mainImage(fragCoord);\n gl_FragColor = vec4(col.rgb * col.a, col.a);\n }\n";
function hslToRgb(h, s, l) {
var r, g, b;
if (s === 0) {
r = g = b = l;
}
else {
var hue2rgb = function (p, q, t) {
if (t < 0)
t += 1;
if (t > 1)
t -= 1;
if (t < 1 / 6)
return p + (q - p) * 6 * t;
if (t < 1 / 2)
return q;
if (t < 2 / 3)
return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return new THREE__namespace.Vector3(r, g, b);
}
function hexToVec3(color) {
if (color.startsWith('#')) {
var r = parseInt(color.slice(1, 3), 16) / 255;
var g = parseInt(color.slice(3, 5), 16) / 255;
var b = parseInt(color.slice(5, 7), 16) / 255;
return new THREE__namespace.Vector3(r, g, b);
}
var rgbMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
if (rgbMatch) {
return new THREE__namespace.Vector3(parseInt(rgbMatch[1], 10) / 255, parseInt(rgbMatch[2], 10) / 255, parseInt(rgbMatch[3], 10) / 255);
}
var hslMatch = color.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%/);
if (hslMatch) {
var h = parseInt(hslMatch[1], 10) / 360;
var s = parseInt(hslMatch[2], 10) / 100;
var l = parseInt(hslMatch[3], 10) / 100;
return hslToRgb(h, s, l);
}
return new THREE__namespace.Vector3(0, 0, 0);
}
var OrbBackgroundComponent = /** @class */ (function () {
function OrbBackgroundComponent(ngZone) {
this.ngZone = ngZone;
/** 球体的基本色调（0-360）*/
this.ncHue = 0;
/** 控制悬停扭曲效果的强度（0-5）*/
this.ncHoverIntensity = 2;
/** 切换开关以启用或禁用鼠标悬停时的连续旋转 */
this._rotateOnHover = true;
/** 即使球体实际上并未悬停，也强制显示悬停动画 */
this._forceHoverState = false;
/** 容器的背景颜色，十六进制格式 */
this.ncBackgroundColor = '#000000';
this.rafId = null;
this.resizeRafId = null;
this.isVisible = true;
this.targetHover = 0;
this.lastTime = 0;
this.currentRot = 0;
this.rotationSpeed = 0.3;
}
Object.defineProperty(OrbBackgroundComponent.prototype, "ncRotateOnHover", {
get: function () {
return this._rotateOnHover;
},
set: function (val) {
this._rotateOnHover = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(OrbBackgroundComponent.prototype, "ncForceHoverState", {
get: function () {
return this._forceHoverState;
},
set: function (val) {
this._forceHoverState = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
OrbBackgroundComponent.prototype.ngOnInit = function () { };
OrbBackgroundComponent.prototype.ngAfterViewInit = function () {
this.initWebGL();
};
OrbBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
OrbBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (this.material) {
if (changes['ncHue']) {
this.material.uniforms['hue'].value = this.ncHue;
}
if (changes['ncHoverIntensity']) {
this.material.uniforms['hoverIntensity'].value = this.ncHoverIntensity;
}
if (changes['ncBackgroundColor']) {
this.material.uniforms['backgroundColor'].value = hexToVec3(this.ncBackgroundColor);
}
}
};
OrbBackgroundComponent.prototype.initWebGL = function () {
var _this = this;
var container = this.containerRef.nativeElement;
this.renderer = new THREE__namespace.WebGLRenderer({ alpha: true, antialias: true, premultipliedAlpha: false });
this.renderer.setClearColor(0x000000, 0); // Transparent background matching WebGL clearColor(0,0,0,0)
container.appendChild(this.renderer.domElement);
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0, 1);
var geometry = new THREE__namespace.PlaneGeometry(2, 2);
this.material = new THREE__namespace.RawShaderMaterial({
vertexShader: vert,
fragmentShader: frag,
transparent: false,
blending: THREE__namespace.NoBlending,
uniforms: {
iTime: { value: 0 },
iResolution: { value: new THREE__namespace.Vector3(1, 1, 1) },
hue: { value: this.ncHue },
hover: { value: 0 },
rot: { value: 0 },
hoverIntensity: { value: this.ncHoverIntensity },
backgroundColor: { value: hexToVec3(this.ncBackgroundColor) }
}
});
this.plane = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(this.plane);
this.setupResizeObserver(container);
this.setupIntersectionObserver(container);
this.lastTime = performance.now();
this.ngZone.runOutsideAngular(function () {
var loop = function (t) {
_this.rafId = requestAnimationFrame(loop);
if (_this.isVisible) {
_this.update(t);
}
};
loop(performance.now());
});
};
OrbBackgroundComponent.prototype.update = function (t) {
var dt = (t - this.lastTime) * 0.001;
this.lastTime = t;
this.material.uniforms['iTime'].value = t * 0.001;
var effectiveHover = this.ncForceHoverState ? 1 : this.targetHover;
this.material.uniforms['hover'].value += (effectiveHover - this.material.uniforms['hover'].value) * 0.1;
if (this.ncRotateOnHover && effectiveHover > 0.5) {
this.currentRot += dt * this.rotationSpeed;
}
this.material.uniforms['rot'].value = this.currentRot;
this.renderer.render(this.scene, this.camera);
};
OrbBackgroundComponent.prototype.handleResize = function () {
if (!this.containerRef || !this.renderer)
return;
var container = this.containerRef.nativeElement;
var dpr = Math.min(window.devicePixelRatio || 1, 2);
var width = container.clientWidth || 1;
var height = container.clientHeight || 1;
this.renderer.setPixelRatio(dpr);
this.renderer.setSize(width, height, false);
var canvas = this.renderer.domElement;
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.style.display = 'block';
if (this.material) {
this.material.uniforms['iResolution'].value.set(canvas.width, canvas.height, canvas.width / canvas.height);
}
};
OrbBackgroundComponent.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.handleResize();
_this.resizeRafId = null;
});
});
});
this.resizeObserver.observe(container);
};
OrbBackgroundComponent.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);
};
OrbBackgroundComponent.prototype.cleanup = function () {
var _a, _b;
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
this.rafId = null;
}
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();
}
};
// ─── HostListeners for Mouse Interaction ──────────────────────────
OrbBackgroundComponent.prototype.onMouseMove = function (event) {
if (!this.containerRef)
return;
var container = this.containerRef.nativeElement;
var rect = container.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
var width = rect.width;
var height = rect.height;
// Prevent division by zero
if (width === 0 || height === 0)
return;
var size = Math.min(width, height);
var centerX = width / 2;
var centerY = height / 2;
var uvX = ((x - centerX) / size) * 2.0;
var uvY = ((y - centerY) / size) * 2.0;
if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
this.targetHover = 1;
}
else {
this.targetHover = 0;
}
};
OrbBackgroundComponent.prototype.onMouseLeave = function () {
this.targetHover = 0;
};
return OrbBackgroundComponent;
}());
OrbBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: OrbBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
OrbBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: OrbBackgroundComponent, selector: "nc-orb-background", inputs: { ncHue: "ncHue", ncHoverIntensity: "ncHoverIntensity", ncRotateOnHover: "ncRotateOnHover", ncForceHoverState: "ncForceHoverState", ncBackgroundColor: "ncBackgroundColor" }, host: { listeners: { "mousemove": "onMouseMove($event)", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-orb-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-orb-canvas-container{position:absolute;inset:0;z-index:0;background-color:#000}.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: OrbBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-orb-background',
templateUrl: './orb-background.component.html',
styleUrls: ['./orb-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncHue: [{
type: i0.Input
}], ncHoverIntensity: [{
type: i0.Input
}], ncRotateOnHover: [{
type: i0.Input
}], ncForceHoverState: [{
type: i0.Input
}], ncBackgroundColor: [{
type: i0.Input
}], onMouseMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}], onMouseLeave: [{
type: i0.HostListener,
args: ['mouseleave']
}] } });
var NcOrbBackgroundModule = /** @class */ (function () {
function NcOrbBackgroundModule() {
}
return NcOrbBackgroundModule;
}());
NcOrbBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcOrbBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcOrbBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcOrbBackgroundModule, declarations: [OrbBackgroundComponent], imports: [common.CommonModule], exports: [OrbBackgroundComponent] });
NcOrbBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcOrbBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcOrbBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
OrbBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
OrbBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcOrbBackgroundModule = NcOrbBackgroundModule;
exports.OrbBackgroundComponent = OrbBackgroundComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-orb-background.umd.js.map