fl-web-component 2.0.0-beta.9 → 2.0.0

package/src/utils/mini-devtool.js

@@ -11,8 +11,8 @@ export default function installErrorConsolePanel() {
   function getCircularReplacer() {
     const seen = new WeakSet();
     return (key, value) => {
-      if (typeof value === "object" && value !== null) {
-        if (seen.has(value)) return "[Circular]";
+      if (typeof value === 'object' && value !== null) {
+        if (seen.has(value)) return '[Circular]';
         seen.add(value);
       }
       return value;
@@ -20,11 +20,15 @@ export default function installErrorConsolePanel() {
   }
   function safeStringify(x) {
     try {
-      if (typeof x === "string") return x;
+      if (typeof x === 'string') return x;
       if (x instanceof Error) return x.stack || x.message || String(x);
       return JSON.stringify(x, getCircularReplacer(), 2);
     } catch (e) {
-      try { return String(x); } catch (e2) { return "[unstringifiable]"; }
+      try {
+        return String(x);
+      } catch (e2) {
+        return '[unstringifiable]';
+      }
     }
   }
 
@@ -52,12 +56,17 @@ export default function installErrorConsolePanel() {
       display: 'flex',
       flexDirection: 'column',
       gap: '6px',
-      padding: '8px'
+      padding: '8px',
     });
 
     // header
     const header = document.createElement('div');
-    Object.assign(header.style, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' });
+    Object.assign(header.style, {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '8px',
+    });
     header.innerHTML = `<strong style="font-size:13px">JS Logs / Errors</strong><span style="opacity:.7;font-size:11px">（非阻塞）</span>`;
 
     const btns = document.createElement('div');
@@ -65,14 +74,23 @@ export default function installErrorConsolePanel() {
     const clearBtn = document.createElement('button');
     clearBtn.textContent = '清空';
     Object.assign(clearBtn.style, { marginLeft: '6px', cursor: 'pointer', fontSize: '12px' });
-    clearBtn.onclick = () => { entriesContainer.innerHTML = ''; entryCount = 0; updateStats(); };
+    clearBtn.onclick = () => {
+      entriesContainer.innerHTML = '';
+      entryCount = 0;
+      updateStats();
+    };
 
     const toggleBtn = document.createElement('button');
     toggleBtn.textContent = '隐藏';
     Object.assign(toggleBtn.style, { cursor: 'pointer', fontSize: '12px' });
     toggleBtn.onclick = () => {
-      if (entriesContainer.style.display === 'none') { entriesContainer.style.display = ''; toggleBtn.textContent = '隐藏'; }
-      else { entriesContainer.style.display = 'none'; toggleBtn.textContent = '显示'; }
+      if (entriesContainer.style.display === 'none') {
+        entriesContainer.style.display = '';
+        toggleBtn.textContent = '隐藏';
+      } else {
+        entriesContainer.style.display = 'none';
+        toggleBtn.textContent = '显示';
+      }
     };
 
     const statsSpan = document.createElement('span');
@@ -93,7 +111,7 @@ export default function installErrorConsolePanel() {
       borderRadius: '6px',
       background: 'rgba(0,0,0,0.32)',
       maxHeight: 'calc(45vh - 48px)',
-      boxSizing: 'border-box'
+      boxSizing: 'border-box',
     });
 
     panel.appendChild(header);
@@ -112,7 +130,12 @@ export default function installErrorConsolePanel() {
 
   // ========== 添加条目 ==========
   let entryCount = 0;
-  function addEntry({ type = 'log', message = '', time = new Date().toLocaleString(), meta = null }) {
+  function addEntry({
+    type = 'log',
+    message = '',
+    time = new Date().toLocaleString(),
+    meta = null,
+  }) {
     const panel = createPanel();
     const entriesContainer = panel._entriesContainer;
     const updateStats = panel._statsUpdater;
@@ -144,14 +167,14 @@ export default function installErrorConsolePanel() {
       error: '#ff6b6b',
       'window.onerror': '#ff6b6b',
       resource: '#ff9966',
-      'unhandledrejection': '#ff8c66',
+      unhandledrejection: '#ff8c66',
       'console.error': '#ff6b6b',
       'console.warn': '#ffd966',
       'console.info': '#66bfff',
       'console.log': '#bfbfbf',
       'console.debug': '#a0a0a0',
       'Vue.error (2)': '#ff6b6b',
-      'Vue.error (3)': '#ff6b6b'
+      'Vue.error (3)': '#ff6b6b',
     };
     const tagColor = colorMap[type] || '#bfbfbf';
     left.innerHTML = `<span style="font-weight:700;color:${tagColor}">${type}</span> <span style="opacity:.7;font-size:11px"> ${time}</span>`;
@@ -182,7 +205,7 @@ export default function installErrorConsolePanel() {
       overflow: 'auto',
       fontSize: '12px',
       lineHeight: '1.3',
-      display: 'block'
+      display: 'block',
     });
 
     // 合成文本（message + meta）
@@ -197,14 +220,24 @@ export default function installErrorConsolePanel() {
 
     if (txt.length > COLLAPSE_LENGTH) {
       content.textContent = txt.slice(0, COLLAPSE_LENGTH) + '\n\n...（已折叠，点击展开查看全部）';
-      expandBtn.onclick = () => { content.textContent = fullText; expandBtn.style.display = 'none'; entriesContainer.scrollTop = entriesContainer.scrollHeight; };
+      expandBtn.onclick = () => {
+        content.textContent = fullText;
+        expandBtn.style.display = 'none';
+        entriesContainer.scrollTop = entriesContainer.scrollHeight;
+      };
     } else {
       content.textContent = txt;
       expandBtn.style.display = 'none';
     }
 
     copyBtn.onclick = () => {
-      try { navigator.clipboard.writeText(fullText); } catch (e) { try { prompt('复制文本：Ctrl+C, Enter', fullText); } catch (ee) {} }
+      try {
+        navigator.clipboard.writeText(fullText);
+      } catch (e) {
+        try {
+          prompt('复制文本：Ctrl+C, Enter', fullText);
+        } catch (ee) {}
+      }
     };
 
     entry.appendChild(header);
@@ -220,7 +253,12 @@ export default function installErrorConsolePanel() {
   // 报告包装
   function report(obj) {
     try {
-      addEntry({ type: obj.type || 'log', message: obj.message || safeStringify(obj), time: new Date().toLocaleString(), meta: obj.meta || null });
+      addEntry({
+        type: obj.type || 'log',
+        message: obj.message || safeStringify(obj),
+        time: new Date().toLocaleString(),
+        meta: obj.meta || null,
+      });
     } catch (e) {
       console.warn('Error panel report failed', e);
     }
@@ -229,34 +267,40 @@ export default function installErrorConsolePanel() {
   // ========== 捕获逻辑 ==========
 
   // 传统同步错误
-  window.onerror = function(message, source, lineno, colno, error) {
-    const msg = `${message}\n at ${source}:${lineno}:${colno}\n${error && error.stack ? error.stack : ''}`;
+  window.onerror = function (message, source, lineno, colno, error) {
+    const msg = `${message}\n at ${source}:${lineno}:${colno}\n${
+      error && error.stack ? error.stack : ''
+    }`;
     report({ type: 'window.onerror', message: msg });
     return false;
   };
 
   // 资源加载错误（图片/script/css 等）
-  window.addEventListener('error', function(event) {
-    const target = event.target || event.srcElement;
-    if (target && (target.src || target.href)) {
-      const tag = target.tagName;
-      const url = target.src || target.href;
-      report({ type: 'resource', message: `Failed to load resource: <${tag}> ${url}` });
-    }
-  }, true);
+  window.addEventListener(
+    'error',
+    function (event) {
+      const target = event.target || event.srcElement;
+      if (target && (target.src || target.href)) {
+        const tag = target.tagName;
+        const url = target.src || target.href;
+        report({ type: 'resource', message: `Failed to load resource: <${tag}> ${url}` });
+      }
+    },
+    true
+  );
 
   // 未处理的 Promise 拒绝
-  window.addEventListener('unhandledrejection', function(event) {
+  window.addEventListener('unhandledrejection', function (event) {
     report({ type: 'unhandledrejection', message: safeStringify(event.reason) });
   });
 
   // 捕获 console.*（可选）
   if (CAPTURE_CONSOLE && typeof console !== 'undefined') {
     const methods = ['log', 'info', 'warn', 'error', 'debug'];
-    methods.forEach((m) => {
+    methods.forEach(m => {
       if (!(m in console)) return;
       const orig = console[m].bind(console);
-      console[m] = function(...args) {
+      console[m] = function (...args) {
         try {
           // 生成调用栈（方便定位是谁调用了 console）
           let stack = null;
@@ -266,19 +310,23 @@ export default function installErrorConsolePanel() {
               // 移除前两行（Error + 本函数）
               stack = err.stack.split('\n').slice(2).join('\n');
             }
-          } catch (e) { stack = null; }
+          } catch (e) {
+            stack = null;
+          }
 
           const payload = {
             type: `console.${m}`,
             message: args.map(a => safeStringify(a)).join(' '),
-            meta: stack
+            meta: stack,
           };
           report(payload);
         } catch (e) {
           // noop
         }
         // 保持原有行为
-        try { orig(...args); } catch (e) {}
+        try {
+          orig(...args);
+        } catch (e) {}
       };
     });
   }
@@ -286,17 +334,25 @@ export default function installErrorConsolePanel() {
   // Vue 2 支持（若使用全局 Vue）
   if (typeof Vue !== 'undefined' && Vue && Vue.config) {
     try {
-      Vue.config.errorHandler = function(err, vm, info) {
-        report({ type: 'Vue.error (2)', message: `${info}\n${err && err.stack ? err.stack : safeStringify(err)}` });
+      Vue.config.errorHandler = function (err, vm, info) {
+        report({
+          type: 'Vue.error (2)',
+          message: `${info}\n${err && err.stack ? err.stack : safeStringify(err)}`,
+        });
       };
-    } catch (e) { /* ignore */ }
+    } catch (e) {
+      /* ignore */
+    }
   }
 
   // Vue 3 注册函数（在 main.js 创建 app 后调用）
-  window.registerVue3ErrorHandler = function(app) {
+  window.registerVue3ErrorHandler = function (app) {
     if (!app || !app.config) return;
     app.config.errorHandler = (err, instance, info) => {
-      report({ type: 'Vue.error (3)', message: `${info}\n${err && err.stack ? err.stack : safeStringify(err)}` });
+      report({
+        type: 'Vue.error (3)',
+        message: `${info}\n${err && err.stack ? err.stack : safeStringify(err)}`,
+      });
     };
   };
 
@@ -304,6 +360,5 @@ export default function installErrorConsolePanel() {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', createPanel);
   } else createPanel();
-
 }
 // ========= End Panel =========

package/src/utils/threejs/measure-angle.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+import { Message } from 'element-ui';
 var _this = null;
 var MeasureAngle = function (renderer, scene, camera, width, height) {
   this.renderer = renderer;
@@ -56,13 +57,30 @@ MeasureAngle.prototype = {
     _this.raycaster.setFromCamera(mouse, this.camera);
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
     if (intersects.length > 0) {
-      return intersects[0].point;
+      return { point: intersects[0].point, isModel: true };
     }
+
+    // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
+    if (_this.pointArray && _this.pointArray.length > 0) {
+      const lastPoint =
+        _this.pointArray.length === 1
+          ? _this.pointArray[0]
+          : _this.pointArray[_this.pointArray.length - 2];
+      const cameraDir = new THREE.Vector3();
+      _this.camera.getWorldDirection(cameraDir);
+      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(cameraDir, lastPoint);
+      const target = new THREE.Vector3();
+      _this.raycaster.ray.intersectPlane(plane, target);
+      if (target) {
+        return { point: target, isModel: false };
+      }
+    }
+
     // 如果没有交点，则创建一个在相机视图平面上的点
-    const ray = new THREE.Ray();
-    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
-    if (ray.origin) {
-      return ray.origin;
+    const target = new THREE.Vector3();
+    _this.raycaster.ray.intersectPlane(_this.plane, target);
+    if (target) {
+      return { point: target, isModel: false };
     }
     return null;
   },
@@ -75,9 +93,16 @@ MeasureAngle.prototype = {
     return sphere;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 10 });
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: config.color,
+      linewidth: 10,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
   },
@@ -91,8 +116,9 @@ MeasureAngle.prototype = {
   },
   mousemove(e) {
     if (_this.isCompleted || _this.pointArray.length === 0) return;
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
+      const point = positionResult.point;
       _this.pointArray.length === 1
         ? _this.pointArray.push(point)
         : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
@@ -160,8 +186,13 @@ MeasureAngle.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const point = _this.getPosition(e);
-        if (point) {
+        const positionResult = _this.getPosition(e);
+        if (positionResult) {
+          const { point, isModel } = positionResult;
+          if (!isModel) {
+            Message.warning('请点击模型进行测量');
+            return;
+          }
           if (_this.tipsLabel) {
             _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
           } else {
@@ -190,8 +221,8 @@ MeasureAngle.prototype = {
       _this.tipsLabel = undefined;
     }
     clearTimeout(_this.timer);
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
       _this.isCompleted = true;
       _this.tempPoints = undefined;
       _this.tempLine = undefined;
@@ -240,8 +271,15 @@ MeasureAngle.prototype = {
   },
   createCurve(points) {
     const geom = new THREE.BufferGeometry().setFromPoints(points);
-    const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+    const material = new THREE.LineBasicMaterial({
+      color: 0xff0000,
+      linewidth: 20,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
     _this.curveLine = new THREE.Line(geom, material);
+    _this.curveLine.renderOrder = 999;
     _this.curveLine.frustumCulled = false;
     _this.curves.push(_this.curveLine);
     _this.scene.add(_this.curveLine);

package/src/utils/threejs/measure-area.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+import { Message } from 'element-ui';
 var _this = null;
 var MeasureArea = function (renderer, scene, camera, width, height) {
   this.renderer = renderer;
@@ -54,21 +55,44 @@ MeasureArea.prototype = {
     _this.raycaster.setFromCamera(mouse, _this.camera);
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
     if (intersects.length > 0) {
-      return intersects[0].point;
+      return { point: intersects[0].point, isModel: true };
+    }
+
+    // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
+    if (_this.pointArray && _this.pointArray.length > 0) {
+      const lastPoint =
+        _this.pointArray.length === 1
+          ? _this.pointArray[0]
+          : _this.pointArray[_this.pointArray.length - 2];
+      const cameraDir = new THREE.Vector3();
+      _this.camera.getWorldDirection(cameraDir);
+      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(cameraDir, lastPoint);
+      const target = new THREE.Vector3();
+      _this.raycaster.ray.intersectPlane(plane, target);
+      if (target) {
+        return { point: target, isModel: false };
+      }
     }
 
     // 如果没有交点，则创建一个在相机视图平面上的点
-    const ray = new THREE.Ray();
-    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
-    if (ray.origin) {
-      return ray.origin;
+    const target = new THREE.Vector3();
+    _this.raycaster.ray.intersectPlane(_this.plane, target);
+    if (target) {
+      return { point: target, isModel: false };
     }
     return null;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 20 });
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: config.color,
+      linewidth: 20,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
   },
@@ -82,8 +106,9 @@ MeasureArea.prototype = {
   },
   mousemove(e) {
     if (_this.isCompleted || _this.pointArray.length === 0) return;
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
+      const point = positionResult.point;
       _this.pointArray.length === 1
         ? _this.pointArray.push(point)
         : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
@@ -153,8 +178,13 @@ MeasureArea.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const point = _this.getPosition(e);
-        if (point) {
+        const positionResult = _this.getPosition(e);
+        if (positionResult) {
+          const { point, isModel } = positionResult;
+          if (!isModel) {
+            Message.warning('请点击模型进行测量');
+            return;
+          }
           if (_this.tipsLabel) {
             _this.tipsLabel.position.set(point.x + 0.01, point.y, point.z + 0.05);
           } else {
@@ -182,8 +212,9 @@ MeasureArea.prototype = {
       _this.tipsLabel = undefined;
     }
     clearTimeout(_this.timer);
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
+      const point = positionResult.point;
       _this.isCompleted = true;
       if (_this.tempPoints) {
         _this.tempPoints.position.set(point.x, point.y, point.z);

package/src/utils/threejs/measure-distance.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+import { Message } from 'element-ui';
 var _this = null;
 var MeasureDistance = function (renderer, scene, camera, width, height) {
   this.renderer = renderer;
@@ -52,22 +53,45 @@ MeasureDistance.prototype = {
     _this.raycaster.setFromCamera(mouse, this.camera);
     let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
     if (intersects.length > 0) {
-      return intersects[0].point;
+      return { point: intersects[0].point, isModel: true };
+    }
+
+    // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
+    if (_this.pointArray && _this.pointArray.length > 0) {
+      const lastPoint =
+        _this.pointArray.length === 1
+          ? _this.pointArray[0]
+          : _this.pointArray[_this.pointArray.length - 2];
+      const cameraDir = new THREE.Vector3();
+      _this.camera.getWorldDirection(cameraDir);
+      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(cameraDir, lastPoint);
+      const target = new THREE.Vector3();
+      _this.raycaster.ray.intersectPlane(plane, target);
+      if (target) {
+        return { point: target, isModel: false };
+      }
     }
 
     // 如果没有交点，则创建一个在相机视图平面上的点
-    const ray = new THREE.Ray();
-    _this.raycaster.ray.intersectPlane(_this.plane, ray.origin);
-    if (ray.origin) {
-      return ray.origin;
+    const target = new THREE.Vector3();
+    _this.raycaster.ray.intersectPlane(_this.plane, target);
+    if (target) {
+      return { point: target, isModel: false };
     }
 
     return null;
   },
   createLine(p1, p2, config = { color: 0xff0000 }) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 15 });
+    const lineMaterial = new THREE.LineBasicMaterial({
+      color: config.color,
+      linewidth: 15,
+      depthTest: false,
+      depthWrite: false,
+      transparent: true,
+    });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
   },
@@ -81,8 +105,9 @@ MeasureDistance.prototype = {
   },
   mousemove(e) {
     if (_this.isCompleted || _this.pointArray.length === 0) return;
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
+      const point = positionResult.point;
       _this.pointArray.length === 1
         ? _this.pointArray.push(point)
         : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
@@ -137,8 +162,14 @@ MeasureDistance.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const point = _this.getPosition(e);
-        if (point) {
+        const positionResult = _this.getPosition(e);
+        if (positionResult) {
+          const { point, isModel } = positionResult;
+          if (!isModel) {
+            // 提示请点击模型
+            Message.warning('请点击模型进行测量');
+            return;
+          }
           if (_this.tipsLabel) {
             _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
           } else {
@@ -167,8 +198,8 @@ MeasureDistance.prototype = {
       _this.tipsLabel = undefined;
     }
     clearTimeout(_this.timer);
-    const point = _this.getPosition(e);
-    if (point) {
+    const positionResult = _this.getPosition(e);
+    if (positionResult) {
       _this.isCompleted = true;
       _this.tempPoints = undefined;
       _this.tempLine = undefined;

package/src/utils/threejs/rain-shader.js

@@ -1,12 +1,12 @@
-import * as THREE from 'three'
+import * as THREE from 'three';
 const RainShader = {
   uniforms: {
-    'tDiffuse': {value: null},
-    'iResolution': {value: null},
-    'iTime': {value: 0},
-    'radian': {value: 0 / 360 * Math.PI},
-    'rainSpeed': {value: 0.2},
-    'rainColor': {value: new THREE.Color(1, 1, 1)}
+    tDiffuse: { value: null },
+    iResolution: { value: null },
+    iTime: { value: 0 },
+    radian: { value: (0 / 360) * Math.PI },
+    rainSpeed: { value: 0.2 },
+    rainColor: { value: new THREE.Color(1, 1, 1) },
   },
   vertexShader: `
     varying vec2 vUv;
@@ -52,7 +52,7 @@ const RainShader = {
         gl_FragColor = vec4(col,0.0);
       }
     }
-  `
-}
+  `,
+};
 
-export { RainShader }
+export { RainShader };

package/src/utils/threejs/snow-shader.js

@@ -1,11 +1,11 @@
 const SnowShader = {
   uniforms: {
-    'tDiffuse': {value: null},
-    'iResolution': {value: null},
-    'iTime': {value: 0.2},
-    'size': {value: 0.05},
-    'density': {value: 1.0},
-    'snowSpeed': {value: 0.6}
+    tDiffuse: { value: null },
+    iResolution: { value: null },
+    iTime: { value: 0.2 },
+    size: { value: 0.05 },
+    density: { value: 1.0 },
+    snowSpeed: { value: 0.6 },
   },
   vertexShader: `
     varying vec2 vUv;
@@ -70,6 +70,6 @@ const SnowShader = {
         gl_FragColor = vec4(colSnow,0.0);
       }
     }
-  `
-}
-export { SnowShader }
+  `,
+};
+export { SnowShader };