@3driseai/3drise-viewer 0.1.40 → 0.1.42

package/dist/components/gallery/looks/glassPanes.js

@@ -0,0 +1,208 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// glass.mjs). Plain JS-shaped code (the viewer compiles non-strict); typed at its one door, kit/GalleryVariant.tsx. Its own DEFAULTS only fill knobs the
+// core defaults (DEFAULT_GALLERY_OBJECTS.glassPanes) do not carry; its own autoplay is never used.
+// glass — the pictures are printed inside thick panes of glass: a picture plate sealed behind a slab of real
+// glass (physical transmission, roughness, thickness, clearcoat — the room refracts through it). The row slides
+// on a damped spring; the pane at the front steps forward, the others stand back at depth, dimmer. Everything is
+// lit by the scene (the studio's lights); the gallery adds none. Cursor: the panes lean toward it.
+import * as THREE from 'three';
+import { fragHead, col, smooth, createScroll, sliceTextures, withLean } from '../kit/galleryKit.js';
+import { createLayout, LAYOUT_GUI } from '../kit/galleryKit.js';
+export const catalog = { key: 'glass', name: 'Glass Panes', camera: { position: [0.6, 0.35, 5.0], target: [0, -0.15, 0] },
+    description: 'Pictures sealed inside thick physical glass panes, lit by the scene; a change slides the row along. Use for architecture, luxury, product and corporate showcases.',
+    tags: ['gallery', 'glass', 'refraction', 'navigation', 'interactive'] };
+export const DEFAULTS = {
+    type: 'glass', enabled: true, lean: 1, imageUrls: [], autoplay: 0, intensity: 1, opacity: 1,
+    aspect: 1.4, width: 1.6, thickness: 0.09, // structural
+    layout: 'row', spacing: 1.25, depth: 0.7, visible: 2.6, shape: 1, dim: 0.3, focusLift: 0.35,
+    stiffness: 34, damping: 9, throwing: 0.12,
+    turnTime: 1.4, turnAngle: 0,
+    edgeGlow: 0, roughness: 0.06, ior: 1.5, tint: '#dfe9ff', edgeColor: '#9ad7ff',
+    pointerMode: 'none', pointerStrength: 1, pointerRadius: 1.5, pointerColor: '#ffd9a6',
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'thickness'];
+export const POINTER_MODES = ['tilt'];
+export const GUI = [
+    { key: 'lean', min: 0, max: 3, step: 0.01, tip: 'The gallery turns toward the cursor' },
+    { key: 'aspect', min: 0.6, max: 2.5, step: 0.01 }, { key: 'width', min: 0.6, max: 3, step: 0.01 }, { key: 'thickness', min: 0.02, max: 0.25, step: 0.005 },
+    ...LAYOUT_GUI, { key: 'dim', min: 0, max: 1, step: 0.01 }, { key: 'focusLift', min: 0, max: 1.5, step: 0.01 },
+    { key: 'stiffness', min: 5, max: 120, step: 1 }, { key: 'damping', min: 2, max: 30, step: 0.1 },
+    { key: 'roughness', min: 0, max: 0.5, step: 0.005 }, { key: 'ior', min: 1, max: 2.3, step: 0.01 },
+    { key: 'autoplay', min: 0, max: 20, step: 0.5 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, { key: 'pointerStrength', min: 0, max: 3, step: 0.01 }, { key: 'pointerRadius', min: 0.2, max: 4, step: 0.01 },
+    { key: 'intensity', min: 0, max: 3, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+    { key: 'tint', color: true }, { key: 'pointerColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Showroom', description: 'The default.', patch: {} },
+    { name: 'Museum', description: 'Thin, very clear glass.', patch: { thickness: 0.04, roughness: 0.02 } },
+    { name: 'Thick slab', description: 'Heavy blue-tinted glass, frosted a little.', patch: { thickness: 0.18, roughness: 0.14, tint: '#c9d8ff' } },
+];
+export function createUniforms() {
+    return { uTex: { value: null }, uIntensity: { value: 1 }, uOpacity: { value: 1 }, uKey: { value: new THREE.Vector3(0.2, 0.8, 0.5).normalize() }, uEdgeColor: { value: col('#9ad7ff') }, uEdgeGlow: { value: 1.2 }, uPointerColor: { value: col('#ffd9a6') } };
+}
+export function applyConfig(u, c) {
+    const set = (k, v) => { if (v === undefined)
+        return; if (u[k].value && u[k].value.isColor) {
+        if (v.isColor)
+            u[k].value.copy(v);
+        else
+            u[k].value.set(v);
+    }
+    else
+        u[k].value = v; };
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uEdgeColor', c.edgeColor);
+    set('uEdgeGlow', c.edgeGlow);
+    set('uPointerColor', c.pointerColor);
+}
+const picVert = /* glsl */ `
+    varying vec2 vUv; varying vec3 vN; varying vec3 vV;
+    void main(){ vUv = uv; vN = normalize(normalMatrix * normal); vec4 mv = modelViewMatrix * vec4(position, 1.0); vV = -mv.xyz; gl_Position = projectionMatrix * mv; }
+`;
+const picFrag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex; uniform float uLayer, uDimK, uFade, uIntensity, uOpacity, uHover; uniform vec3 uKey, uPointerColor;
+    varying vec2 vUv; varying vec3 vN; varying vec3 vV;
+    void main(){
+        vec3 pic = texture(uTex, vec3(vUv, uLayer)).rgb;
+        vec3 N = normalize(vN); vec3 L = normalize((viewMatrix * vec4(uKey, 0.0)).xyz);
+        float lam = 0.65 + 0.35 * max(dot(N, L), 0.0);
+        vec3 c = pic * lam * uDimK + uPointerColor * uHover * 0.15;
+        float a = uOpacity * uFade; if (a < 0.2) discard;
+        gl_FragColor = vec4(c * uIntensity, 1.0);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+const edgeVert = /* glsl */ `
+    attribute float aT; varying float vT; varying vec3 vP;
+    void main(){ vT = aT; vP = (modelMatrix * vec4(position, 1.0)).xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }
+`;
+const edgeFrag = /* glsl */ `
+    ${fragHead}
+    uniform vec3 uEdgeColor, uPic; uniform float uEdgeGlow, uDimK, uFade, uIntensity, uOpacity, uTime, uSpin;
+    varying float vT; varying vec3 vP;
+    void main(){
+        // light trapped in the slab: brightest where it enters (the lit top edge) and in a slow travelling pulse
+        float pulse = 0.6 + 0.4 * sin(vT * 12.566 - uTime * 1.2);
+        float spinFlash = 1.0 + 2.5 * uSpin;
+        vec3 c = mix(uEdgeColor, uPic, 0.45) * uEdgeGlow * 3.0 * pulse * spinFlash * uDimK;
+        float a = uFade * uOpacity; if (a < 0.003) discard;
+        gl_FragColor = vec4(c * uIntensity * a, 0.0);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const MAX = 32, W = c.width, H = W / c.aspect, T = c.thickness;
+    const object = new THREE.Group();
+    const railMat = new THREE.MeshStandardMaterial({ color: '#2a2d35', roughness: 0.5, metalness: 0.7 });
+    const rail = new THREE.Mesh(new THREE.BoxGeometry(1, 0.03, 0.26), railMat);
+    rail.position.y = -H / 2 - 0.02;
+    rail.receiveShadow = true;
+    rail.visible = false;
+    object.add(rail);
+    const glassMat = new THREE.MeshPhysicalMaterial({ color: c.tint, roughness: c.roughness, metalness: 0, transmission: 1, thickness: T * 3, ior: c.ior, transparent: true, envMapIntensity: 1, clearcoat: 1, clearcoatRoughness: 0.05, side: THREE.DoubleSide });
+    const slabGeo = new THREE.BoxGeometry(W, H, T);
+    const edgeGeo = (() => {
+        const pts = [[-W / 2, -H / 2], [W / 2, -H / 2], [W / 2, H / 2], [-W / 2, H / 2]];
+        const pos = [], t = [];
+        for (let i = 0; i < 4; i++) {
+            const a = pts[i], b = pts[(i + 1) % 4];
+            for (const z of [-T / 2, T / 2]) {
+                pos.push(a[0], a[1], z, b[0], b[1], z);
+                t.push(i / 4, (i + 1) / 4);
+            }
+        }
+        const g = new THREE.BufferGeometry();
+        g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+        g.setAttribute('aT', new THREE.Float32BufferAttribute(t, 1));
+        return g;
+    })();
+    const panes = [];
+    const picGeo = new THREE.PlaneGeometry(W * 0.96, H * 0.96);
+    for (let i = 0; i < MAX; i++) {
+        const hinge = new THREE.Group();
+        // the print behind the glass: lit by the scene; opaque, because the transmission pass only sees opaque objects
+        const picMat = new THREE.MeshStandardMaterial({ color: '#ffffff', roughness: 0.55, metalness: 0, side: THREE.DoubleSide });
+        const pic = new THREE.Mesh(picGeo, picMat);
+        pic.position.z = -T * 0.25;
+        const slab = new THREE.Mesh(slabGeo, glassMat);
+        slab.castShadow = false;
+        slab.receiveShadow = false;
+        const edgeMat = new THREE.ShaderMaterial({ uniforms: { uEdgeColor: u.uEdgeColor, uEdgeGlow: u.uEdgeGlow, uPic: { value: new THREE.Color('#ffffff') }, uDimK: { value: 1 }, uFade: { value: 1 }, uIntensity: u.uIntensity, uOpacity: u.uOpacity, uTime: { value: 0 }, uSpin: { value: 0 } }, vertexShader: edgeVert, fragmentShader: edgeFrag, glslVersion: THREE.GLSL3, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, premultipliedAlpha: true });
+        const edges = new THREE.LineSegments(edgeGeo, edgeMat);
+        hinge.add(pic, slab);
+        hinge.visible = false;
+        hinge.matrixAutoUpdate = false;
+        object.add(hinge);
+        panes.push({ hinge, pic, picMat, edgeMat, spin: 0, spinDir: 1 });
+    }
+    const pick = new THREE.Mesh(new THREE.PlaneGeometry(W, H), new THREE.MeshBasicMaterial({ visible: false }));
+    object.add(pick);
+    const cfg = { ...c };
+    const scroll = createScroll(cfg, (dir) => { for (const p of panes)
+        if (p.hinge.visible) {
+            p.spin = 0.0001;
+            p.spinDir = dir;
+        } });
+    scroll.st.pitch = W * c.spacing;
+    const st = { time: 0, avg: [], tex: [] };
+    const layout = createLayout(W, H), _m = new THREE.Matrix4(), _r = new THREE.Matrix4();
+    const controls = Object.assign(scroll.controls, {
+        setTexture(tex, count) {
+            for (const t of st.tex ?? [])
+                t.dispose();
+            scroll.st.count = Math.min(count, MAX);
+            [st.tex] = sliceTextures(tex, scroll.st.count);
+            tex.dispose();
+            st.tex.forEach((t, i) => { panes[i].picMat.map = t; panes[i].picMat.needsUpdate = true; });
+        },
+    });
+    object.userData.gallery = controls;
+    return {
+        object, controls, pickMesh: pick, materials: [glassMat, railMat, ...panes.map(p => p.picMat), ...panes.map(p => p.edgeMat)],
+        apply(k) { Object.assign(cfg, k); applyConfig(u, k); scroll.st.pitch = W * cfg.spacing; if (k.tint)
+            glassMat.color.set(k.tint); if (k.roughness !== undefined)
+            glassMat.roughness = k.roughness; if (k.ior !== undefined)
+            glassMat.ior = k.ior; },
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.05);
+            st.time += dt;
+            scroll.step(dt, pointer);
+            const n = scroll.st.count, s0 = scroll.st.s, pitch = W * cfg.spacing;
+            const span = Math.min(n, 2 * cfg.visible + 1) * pitch;
+            rail.scale.x = span;
+            rail.position.x = 0;
+            for (let i = 0; i < n; i++) {
+                const p = panes[i];
+                const { d, focus, fade } = layout.place(i, s0, n, cfg, p.hinge.matrix);
+                const vis = fade > 0.05;
+                p.hinge.visible = vis;
+                if (!vis)
+                    continue;
+                // the front pane steps forward out of its place (along its own normal)
+                let yaw = 0;
+                if (pointer && cfg.pointerMode === 'tilt') {
+                    const dx = pointer.x - p.hinge.matrix.elements[12];
+                    const w = 1 - smooth(0, cfg.pointerRadius, Math.abs(dx));
+                    yaw = Math.atan2(dx, 3) * 0.4 * w * cfg.pointerStrength;
+                }
+                p.hinge.matrix.multiply(_m.makeTranslation(0, 0, cfg.focusLift * focus)).multiply(_r.makeRotationY(yaw));
+                p.hinge.matrixWorldNeedsUpdate = true;
+                p.picMat.color.setScalar((1 - cfg.dim * (1 - focus)) * fade * cfg.intensity);
+            }
+            pick.position.x = 0;
+        },
+        dispose() { slabGeo.dispose(); picGeo.dispose(); edgeGeo.dispose(); glassMat.dispose(); railMat.dispose(); rail.geometry.dispose(); for (const p of panes) {
+            p.picMat.dispose();
+            p.edgeMat.dispose();
+        } pick.geometry.dispose(); if (u.uTex.value)
+            u.uTex.value.dispose(); for (const t of st.tex ?? [])
+            t.dispose(); },
+    };
+}

package/dist/components/gallery/looks/halo.d.ts

@@ -0,0 +1,100 @@
+export declare const catalog: {
+    key: string;
+    name: string;
+    camera: {
+        position: number[];
+        target: number[];
+    };
+    description: string;
+    tags: string[];
+};
+export declare const DEFAULTS: {
+    type: string;
+    enabled: boolean;
+    lean: number;
+    imageUrls: any[];
+    autoplay: number;
+    intensity: number;
+    opacity: number;
+    aspect: number;
+    width: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    stepOut: number;
+    focusScale: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    changeTime: number;
+    dim: number;
+    roughness: number;
+    pointerMode: string;
+    pointerStrength: number;
+    pointerRadius: number;
+    pointerColor: string;
+};
+export declare const STRUCTURAL: string[];
+export declare const POINTER_MODES: any[];
+export declare const GUI: ({
+    key: string;
+    options: string[];
+    tip: string;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    tip: string;
+    options?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    options?: undefined;
+} | {
+    key: string;
+    options: any[];
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        shape?: undefined;
+        stepOut?: undefined;
+        spacing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        shape: number;
+        stepOut: number;
+        spacing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        shape: number;
+        spacing: number;
+        stepOut?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uTex: {
+        value: any;
+    };
+};
+export declare function applyConfig(): void;
+export declare function build(u: any, c: any): any;
+//# sourceMappingURL=halo.d.ts.map

package/dist/components/gallery/looks/halo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"halo.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/halo.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,OAAO;;;;;;;;;CAE6D,CAAC;AAElF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpB,CAAC;AACF,eAAO,MAAM,UAAU,UAAmC,CAAC;AAC3D,eAAO,MAAM,aAAa,OAAK,CAAC;AAChC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;IAUf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AACF,wBAAgB,cAAc;;;;EAAwC;AACtE,wBAAgB,WAAW,SAAK;AAchC,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

package/dist/components/gallery/looks/halo.js

@@ -0,0 +1,119 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// halo.mjs). Plain JS-shaped code (the viewer compiles non-strict); typed at its one door, kit/GalleryVariant.tsx. Its own DEFAULTS only fill knobs the
+// core defaults (DEFAULT_GALLERY_OBJECTS.halo) do not carry; its own autoplay is never used.
+// halo — the front picture steps out. Prints lit by the scene (the studio's lights; the gallery adds none): the
+// picture that comes to the front steps out of its place toward the viewer, grows and comes to full colour; the
+// others sit back, faded and grey. Made for the Ring layout (the default) but rides any layout.
+import * as THREE from 'three';
+import { createScroll, approach, sliceTextures, withLean } from '../kit/galleryKit.js';
+import { createLayout, LAYOUT_GUI } from '../kit/galleryKit.js';
+export const catalog = { key: 'halo', name: 'Halo', camera: { position: [0, 0.35, 5.2], target: [0, -0.2, -1.4] },
+    description: 'Scene-lit prints; the one that comes to the front steps out toward the viewer, grows and comes to full colour, the others sit back faded and grey. On a tilted ring by default. Use for brand rings, collections, hero rotations.',
+    tags: ['gallery', 'ring', 'orbit', 'rotation', 'navigation', 'interactive'] };
+export const DEFAULTS = {
+    type: 'halo', enabled: true, lean: 1, imageUrls: [], autoplay: 0, intensity: 1, opacity: 1,
+    aspect: 1.4, width: 1.6, // structural
+    layout: 'ring', spacing: 1.0, depth: 0, visible: 2.4, shape: 1, stepOut: 0.7, focusScale: 1.3,
+    stiffness: 26, damping: 8, throwing: 0.12,
+    changeTime: 0.9, dim: 0.35, roughness: 0.6,
+    pointerMode: 'none', pointerStrength: 1, pointerRadius: 3, pointerColor: '#ffd9a6',
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width'];
+export const POINTER_MODES = [];
+export const GUI = [
+    { key: 'lean', min: 0, max: 3, step: 0.01, tip: 'The gallery turns toward the cursor' },
+    { key: 'aspect', min: 0.6, max: 2.5, step: 0.01 }, { key: 'width', min: 0.4, max: 2.5, step: 0.01 },
+    ...LAYOUT_GUI,
+    { key: 'stepOut', min: 0, max: 2, step: 0.01 }, { key: 'focusScale', min: 1, max: 2, step: 0.01 },
+    { key: 'stiffness', min: 5, max: 120, step: 1 }, { key: 'damping', min: 2, max: 30, step: 0.1 },
+    { key: 'changeTime', min: 0.2, max: 3, step: 0.05 }, { key: 'dim', min: 0, max: 1, step: 0.01 }, { key: 'roughness', min: 0, max: 1, step: 0.01 },
+    { key: 'autoplay', min: 0, max: 20, step: 0.5 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, { key: 'pointerStrength', min: 0, max: 3, step: 0.01 }, { key: 'pointerRadius', min: 0.2, max: 6, step: 0.01 },
+    { key: 'intensity', min: 0, max: 3, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+];
+export const PRESETS = [
+    { name: 'Halo', description: 'The default.', patch: {} },
+    { name: 'Edge-on', description: 'A flat ring seen from its rim.', patch: { shape: 0.3, stepOut: 0.9 } },
+    { name: 'Crown', description: 'A steep, wide ring.', patch: { shape: 4, spacing: 1.25 } },
+];
+export function createUniforms() { return { uTex: { value: null } }; }
+export function applyConfig() { }
+/** A standard (scene-lit) material whose colour can drain to grey: uSat 1 = the picture, 0 = its luminance. */
+function printMaterial() {
+    const m = new THREE.MeshStandardMaterial({ color: '#ffffff', roughness: 0.6, metalness: 0, side: THREE.DoubleSide, transparent: true });
+    m.userData.uSat = { value: 1 };
+    m.onBeforeCompile = (sh) => {
+        sh.uniforms.uSat = m.userData.uSat;
+        sh.fragmentShader = sh.fragmentShader.replace('#include <common>', '#include <common>\nuniform float uSat;')
+            .replace('#include <map_fragment>', '#include <map_fragment>\n    diffuseColor.rgb = mix(vec3(dot(diffuseColor.rgb, vec3(0.299, 0.587, 0.114))), diffuseColor.rgb, uSat);');
+    };
+    return m;
+}
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const MAX = 32, W = c.width, H = W / c.aspect;
+    const object = new THREE.Group();
+    const ring = new THREE.Group();
+    object.add(ring);
+    const geo = new THREE.PlaneGeometry(W, H);
+    const items = [];
+    for (let i = 0; i < MAX; i++) {
+        const mat = printMaterial();
+        const m = new THREE.Mesh(geo, mat);
+        m.castShadow = true;
+        m.receiveShadow = true;
+        m.visible = false;
+        m.matrixAutoUpdate = false;
+        ring.add(m);
+        items.push({ mesh: m, mat, act: 0 });
+    }
+    const pick = new THREE.Mesh(new THREE.PlaneGeometry(W * 1.3, H * 1.3), new THREE.MeshBasicMaterial({ visible: false }));
+    object.add(pick);
+    const cfg = { ...c };
+    const scroll = createScroll(cfg, () => { });
+    scroll.st.pitch = W * c.spacing;
+    const layout = createLayout(W, H), _t = new THREE.Matrix4();
+    const st = { time: 0, tex: [], lean: 0 };
+    const controls = Object.assign(scroll.controls, {
+        setTexture(tex, count) {
+            for (const t of st.tex)
+                t.dispose();
+            scroll.st.count = Math.min(count, MAX);
+            [st.tex] = sliceTextures(tex, scroll.st.count);
+            tex.dispose();
+            st.tex.forEach((t, i) => { items[i].mat.map = t; items[i].mat.needsUpdate = true; });
+            items.forEach((it, i) => { it.act = i === controls.index ? 1 : 0; });
+        },
+    });
+    object.userData.gallery = controls;
+    return {
+        object, controls, pickMesh: pick, materials: items.map(i => i.mat),
+        apply(k) { Object.assign(cfg, k); for (const it of items)
+            it.mat.roughness = cfg.roughness; },
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.05);
+            st.time += dt;
+            scroll.step(dt, pointer);
+            const n = scroll.st.count, s0 = scroll.st.s;
+            for (let i = 0; i < n; i++) {
+                const it = items[i];
+                const { focus, fade } = layout.place(i, s0, n, cfg, it.mesh.matrix);
+                it.mesh.visible = fade > 0.002;
+                it.act = approach(it.act, focus > 0.5 ? 1 : 0, dt, cfg.changeTime);
+                const e = it.act * it.act * (3 - 2 * it.act);
+                // steps out of its place toward the viewer (along its own normal) and grows as it becomes the active one
+                it.mesh.matrix.multiply(_t.makeTranslation(0, 0, cfg.stepOut * e)).multiply(_t.makeScale(1 + (cfg.focusScale - 1) * e, 1 + (cfg.focusScale - 1) * e, 1));
+                it.mesh.matrixWorldNeedsUpdate = true;
+                it.mat.userData.uSat.value = e;
+                it.mat.color.setScalar((cfg.dim + (1 - cfg.dim) * e) * cfg.intensity);
+                it.mat.opacity = cfg.opacity * fade;
+            }
+            for (let i = n; i < MAX; i++)
+                items[i].mesh.visible = false;
+            pick.position.set(0, 0, cfg.stepOut);
+        },
+        dispose() { geo.dispose(); for (const it of items)
+            it.mat.dispose(); for (const t of st.tex)
+            t.dispose(); pick.geometry.dispose(); },
+    };
+}

package/dist/components/gallery/looks/lightThreads.d.ts

@@ -0,0 +1,199 @@
+import * as THREE from 'three';
+export declare const catalog: {
+    key: string;
+    name: string;
+    camera: {
+        position: number[];
+        target: number[];
+    };
+    description: string;
+    tags: string[];
+};
+export declare const DEFAULTS: {
+    type: string;
+    enabled: boolean;
+    lean: number;
+    imageUrls: any[];
+    autoplay: number;
+    intensity: number;
+    opacity: number;
+    aspect: number;
+    threads: number;
+    width: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    dim: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    restring: number;
+    sweep: number;
+    headGlow: number;
+    beads: number;
+    rail: boolean;
+    threadColor: string;
+    railColor: string;
+    pointerMode: string;
+    pointerStrength: number;
+    pointerRadius: number;
+    pointerColor: string;
+};
+export declare const STRUCTURAL: string[];
+export declare const POINTER_MODES: string[];
+export declare const GUI: ({
+    key: string;
+    options: string[];
+    tip: string;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    tip: string;
+    options?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    options?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+    options?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    options: string[];
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    color: boolean;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+    options?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        threads?: undefined;
+        beads?: undefined;
+        restring?: undefined;
+        headGlow?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        threads: number;
+        beads: number;
+        restring?: undefined;
+        headGlow?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        threads: number;
+        restring: number;
+        headGlow: number;
+        beads?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uTex: {
+        value: any;
+    };
+    uS: {
+        value: number;
+    };
+    uCount: {
+        value: number;
+    };
+    uTime: {
+        value: number;
+    };
+    uReveal: {
+        value: Float32Array<ArrayBuffer>;
+    };
+    uSpacing: {
+        value: number;
+    };
+    uDepth: {
+        value: number;
+    };
+    uScatter: {
+        value: number;
+    };
+    uVisible: {
+        value: number;
+    };
+    uDim: {
+        value: number;
+    };
+    uHead: {
+        value: number;
+    };
+    uBeads: {
+        value: number;
+    };
+    uSway: {
+        value: number;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uThreadColor: {
+        value: THREE.Color;
+    };
+    uPointerColor: {
+        value: THREE.Color;
+    };
+    uPointer: {
+        value: THREE.Vector3;
+    };
+    uPointerActive: {
+        value: number;
+    };
+    uPointerMode: {
+        value: number;
+    };
+    uPointerStrength: {
+        value: number;
+    };
+    uPointerRadius: {
+        value: number;
+    };
+    uW: {
+        value: number;
+    };
+    uH: {
+        value: number;
+    };
+    uN: {
+        value: number;
+    };
+    uPlace: {
+        value: THREE.Matrix4[];
+    };
+};
+export declare function applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): any;
+//# sourceMappingURL=lightThreads.d.ts.map

package/dist/components/gallery/looks/lightThreads.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightThreads.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/lightThreads.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,OAAO;;;;;;;;;CAE+E,CAAC;AAEpG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA8C,CAAC;AACtE,eAAO,MAAM,aAAa,UAAa,CAAC;AACxC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AAGF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAM/B;AAqED,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}