cfd-materials 0.1.0

package/lib/components/cloud-visualization/cloud-visualization.js

@@ -0,0 +1,743 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var THREE = _interopRequireWildcard(require("three"));
+var _variables = require("../../variables");
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+/**
+ * 保存 three.js 渲染上下文
+ * 用于后续销毁 renderer、停止动画、移除事件等
+ */
+
+/**
+ * 保存 three.js 渲染上下文
+ * 用于后续销毁 renderer、停止动画、移除事件等
+ */
+
+/**
+* 解析 CSV 后得到的数据集结构
+* points: 所有采样点
+* xValues/yValues/zValues: 各坐标轴的离散取值
+* xMin/xMax...: 坐标范围
+* fieldRanges: 各物理量最小值和最大值，用于归一化
+*/
+
+var GRID_SIZE = 48; //可视化平面分辨率可视化平面分辨率，值越大，画面越细腻，但计算量也越大
+var WORLD_SIZE = 24; //three.js 场景中的世界尺寸，只是显示尺寸不是真实的cfd物理尺寸
+//云图组件的主体部分
+var CloudVisualization = function CloudVisualization(_ref) {
+  var _ref$dataUrl = _ref.dataUrl,
+    dataUrl = _ref$dataUrl === void 0 ? '' : _ref$dataUrl,
+    _ref$field = _ref.field,
+    field = _ref$field === void 0 ? 'pressure' : _ref$field,
+    _ref$viewMode = _ref.viewMode,
+    viewMode = _ref$viewMode === void 0 ? '3d' : _ref$viewMode,
+    _ref$displayMode = _ref.displayMode,
+    displayMode = _ref$displayMode === void 0 ? 'surface' : _ref$displayMode,
+    _ref$colorMap = _ref.colorMap,
+    colorMap = _ref$colorMap === void 0 ? 'jet' : _ref$colorMap,
+    _ref$opacity = _ref.opacity,
+    opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
+    _ref$sliceOrigin = _ref.sliceOrigin,
+    sliceOrigin = _ref$sliceOrigin === void 0 ? 0.5 : _ref$sliceOrigin,
+    _ref$isoValue = _ref.isoValue,
+    isoValue = _ref$isoValue === void 0 ? 0.5 : _ref$isoValue,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? '#061526' : _ref$background,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  /**
+  * viewportRef: three.js canvas 挂载容器
+  * viewerRef: 保存 renderer/scene/camera 等对象
+  */
+  var viewportRef = (0, _react.useRef)(null);
+  var viewerRef = (0, _react.useRef)(null);
+  /**
+  * dataset: 解析后的 CSV 数据
+  * dataStatus: 右下角显示当前数据来源
+  */
+  var _useState = (0, _react.useState)(null),
+    dataset = _useState[0],
+    setDataset = _useState[1];
+  var _useState2 = (0, _react.useState)('demo-field'),
+    dataStatus = _useState2[0],
+    setDataStatus = _useState2[1];
+  //合并外部传入样式和默认背景
+  var mergedStyle = (0, _extends2["default"])({}, style, {
+    background: background
+  });
+  /**
+   * 根据当前模式，生成右下角显示的文字标签
+   */
+  var displayLabel = (0, _react.useMemo)(function () {
+    if (viewMode === '2d') return '2D 云图';
+    if (displayMode === 'slice') return '3D 切面';
+    if (displayMode === 'isosurface') return '3D 等值面';
+    return '3D 表面';
+  }, [viewMode, displayMode]);
+  /**
+   * 作用：
+   * 当 dataUrl 变化时，尝试去加载 CSV 文件
+   * 成功则解析成 dataset
+   * 失败则退回演示模式
+   */
+  (0, _react.useEffect)(function () {
+    var disposed = false;
+    function loadCsvDataset() {
+      return _loadCsvDataset.apply(this, arguments);
+    }
+    function _loadCsvDataset() {
+      _loadCsvDataset = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var res, text, parsed, _t;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (dataUrl) {
+                _context.next = 1;
+                break;
+              }
+              setDataset(null);
+              setDataStatus('demo-field');
+              return _context.abrupt("return");
+            case 1:
+              _context.prev = 1;
+              _context.next = 2;
+              return fetch(dataUrl);
+            case 2:
+              res = _context.sent;
+              _context.next = 3;
+              return res.text();
+            case 3:
+              text = _context.sent;
+              if (res.ok) {
+                _context.next = 4;
+                break;
+              }
+              throw new Error("HTTP " + res.status);
+            case 4:
+              // 解析 CSV 文本为结构化数据
+              parsed = parseCsvToDataset(text);
+              if (!disposed) {
+                setDataset(parsed);
+                setDataStatus(dataUrl);
+              }
+              _context.next = 6;
+              break;
+            case 5:
+              _context.prev = 5;
+              _t = _context["catch"](1);
+              // 加载失败时，回退到 demo 模式
+              if (!disposed) {
+                setDataset(null);
+                setDataStatus('demo-field (csv load failed)');
+              }
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 5]]);
+      }));
+      return _loadCsvDataset.apply(this, arguments);
+    }
+    loadCsvDataset();
+    return function () {
+      disposed = true;
+    };
+  }, [dataUrl]);
+  /**
+   * 作用：
+   * 当 field / viewMode / displayMode / dataset 等变化时
+   * 重新创建 three.js 场景并渲染最新画面
+   */
+  (0, _react.useEffect)(function () {
+    var mountNode = viewportRef.current;
+    if (!mountNode) return;
+    // 每次重新渲染前，先销毁旧场景
+    destroyViewer();
+    var width = Math.max(mountNode.clientWidth, 320);
+    var height = Math.max(mountNode.clientHeight, 240);
+    var aspect = width / height;
+    // 创建场景
+    var scene = new THREE.Scene();
+    scene.background = new THREE.Color(background);
+    var camera;
+    /**
+     * 2D 模式：使用正交相机
+     * 3D 模式：使用透视相机
+     */
+    if (viewMode === '2d') {
+      var frustum = 16;
+      camera = new THREE.OrthographicCamera(-frustum * aspect, frustum * aspect, frustum, -frustum, 0.1, 1000);
+      camera.position.set(0, 0, 60);
+      camera.lookAt(0, 0, 0);
+    } else {
+      camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1000);
+      camera.position.set(24, 18, 24);
+      camera.lookAt(0, 0, 0);
+    }
+    var renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      alpha: false
+    });
+    renderer.setPixelRatio(window.devicePixelRatio || 1);
+    renderer.setSize(width, height);
+    // 清空挂载点并插入 canvas
+    mountNode.innerHTML = '';
+    mountNode.appendChild(renderer.domElement);
+    var cleanupFns = [];
+    /**
+      * 3D 模式下添加灯光
+      * 2D 模式不需要复杂灯光
+      */
+    if (viewMode === '3d') {
+      var ambientLight = new THREE.AmbientLight(0xffffff, 0.85);
+      var directionalLight = new THREE.DirectionalLight(0xffffff, 1.1);
+      directionalLight.position.set(18, 24, 12);
+      scene.add(ambientLight);
+      scene.add(directionalLight);
+    }
+    /**
+       * 坐标轴辅助线
+       * 只在 3D 模式下显示
+       */
+    var axesHelper = new THREE.AxesHelper(10);
+    axesHelper.position.set(-10, -8, -10);
+    if (viewMode === '3d') {
+      scene.add(axesHelper);
+    }
+    /**
+        * 根据当前属性，构建实际可视化对象
+        * 比如 2D 平面、3D 曲面、切面、等值区域等
+        */
+    var contentCleanup = buildVisualization({
+      scene: scene,
+      field: field,
+      viewMode: viewMode,
+      displayMode: displayMode,
+      colorMap: colorMap,
+      opacity: opacity,
+      sliceOrigin: sliceOrigin,
+      isoValue: isoValue,
+      dataset: dataset
+    });
+    cleanupFns.push(contentCleanup);
+    /**
+     * 动画循环
+     * 3D 模式下让相机缓慢绕场景转动，增强展示效果
+     */
+    var angle = 0;
+    var _animate = function animate() {
+      if (viewMode === '3d' && camera instanceof THREE.PerspectiveCamera) {
+        angle += 0.005;
+        camera.position.x = Math.cos(angle) * 30;
+        camera.position.z = Math.sin(angle) * 30;
+        camera.lookAt(0, 0, 0);
+      }
+      renderer.render(scene, camera);
+      var frameId = requestAnimationFrame(_animate);
+      if (viewerRef.current) {
+        viewerRef.current.frameId = frameId;
+      }
+    };
+    /**
+     * 监听窗口大小变化，更新相机和渲染器尺寸
+     */
+    var handleResize = function handleResize() {
+      if (!viewportRef.current || !viewerRef.current) return;
+      var nextWidth = Math.max(viewportRef.current.clientWidth, 320);
+      var nextHeight = Math.max(viewportRef.current.clientHeight, 240);
+      var nextAspect = nextWidth / nextHeight;
+      renderer.setSize(nextWidth, nextHeight);
+      if (viewerRef.current.camera instanceof THREE.PerspectiveCamera) {
+        viewerRef.current.camera.aspect = nextAspect;
+        viewerRef.current.camera.updateProjectionMatrix();
+      } else if (viewerRef.current.camera instanceof THREE.OrthographicCamera) {
+        var _frustum = 16;
+        viewerRef.current.camera.left = -_frustum * nextAspect;
+        viewerRef.current.camera.right = _frustum * nextAspect;
+        viewerRef.current.camera.top = _frustum;
+        viewerRef.current.camera.bottom = -_frustum;
+        viewerRef.current.camera.updateProjectionMatrix();
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    cleanupFns.push(function () {
+      return window.removeEventListener('resize', handleResize);
+    });
+    //保存当前的three.js环境
+    viewerRef.current = {
+      renderer: renderer,
+      scene: scene,
+      camera: camera,
+      frameId: 0,
+      cleanupFns: cleanupFns
+    };
+    _animate();
+    return function () {
+      destroyViewer();
+    };
+  }, [field, viewMode, displayMode, colorMap, opacity, sliceOrigin, isoValue, background, dataset]);
+  /**
+   * 销毁旧的 three.js 资源
+   * 包括动画帧、事件、renderer、canvas 等
+   */
+
+  function destroyViewer() {
+    var current = viewerRef.current;
+    if (!current) return;
+    if (current.frameId) {
+      cancelAnimationFrame(current.frameId);
+    }
+    current.cleanupFns.forEach(function (fn) {
+      return fn();
+    });
+    current.renderer.dispose();
+    if (current.renderer.domElement && current.renderer.domElement.parentNode) {
+      current.renderer.domElement.parentNode.removeChild(current.renderer.domElement);
+    }
+    viewerRef.current = null;
+  }
+  /**
+     * 组件最终渲染结构：
+     * 顶部工具条 + 中间 viewport + 右下角图例信息
+     */
+  return /*#__PURE__*/React.createElement("div", {
+    className: _variables.bizCssPrefix + "-cloud-visualization",
+    style: mergedStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _variables.bizCssPrefix + "-cloud-visualization__toolbar"
+  }, /*#__PURE__*/React.createElement("span", null, "field: ", field), /*#__PURE__*/React.createElement("span", null, "mode: ", displayMode), /*#__PURE__*/React.createElement("span", null, "view: ", viewMode), /*#__PURE__*/React.createElement("span", null, "map: ", colorMap), /*#__PURE__*/React.createElement("span", null, "opacity: ", opacity)), /*#__PURE__*/React.createElement("div", {
+    ref: viewportRef,
+    className: _variables.bizCssPrefix + "-cloud-visualization__viewport"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _variables.bizCssPrefix + "-cloud-visualization__legend"
+  }, /*#__PURE__*/React.createElement("div", null, displayLabel), /*#__PURE__*/React.createElement("div", null, "slice: ", sliceOrigin), /*#__PURE__*/React.createElement("div", null, "iso: ", isoValue), /*#__PURE__*/React.createElement("div", null, "data: ", dataStatus)));
+};
+CloudVisualization.displayName = 'CloudVisualization';
+var _default = exports["default"] = CloudVisualization;
+/**
+ * 根据当前模式，向 scene 中添加不同可视化对象
+ */
+function buildVisualization(params) {
+  var scene = params.scene,
+    field = params.field,
+    viewMode = params.viewMode,
+    displayMode = params.displayMode,
+    colorMap = params.colorMap,
+    opacity = params.opacity,
+    sliceOrigin = params.sliceOrigin,
+    isoValue = params.isoValue,
+    dataset = params.dataset;
+  var objects = [];
+  // 添加对象到场景，并记录下来，方便后续统一销毁
+  var addObject = function addObject(obj) {
+    scene.add(obj);
+    objects.push(obj);
+  };
+  //2d只绘制平面热力图
+  if (viewMode === '2d') {
+    addObject(createHeatmapPlane(field, colorMap, opacity, dataset, sliceOrigin));
+  } else if (displayMode === 'surface') {
+    /**
+    * 3D 表面模式：
+    * 用标量值映射曲面高度
+    */
+    addObject(createSurfaceMesh(field, colorMap, opacity, dataset, sliceOrigin));
+    addObject(createWireFrameBox());
+  } else if (displayMode === 'slice') {
+    /**
+    * 3D 切面模式：
+    * 一个半透明表面 + 一个真实切片平面
+    */
+    var surface = createSurfaceMesh(field, colorMap, Math.min(opacity, 0.35), dataset, sliceOrigin);
+    surface.position.y = -2;
+    addObject(surface);
+    addObject(createSlicePlane(field, colorMap, opacity, sliceOrigin, dataset));
+    addObject(createWireFrameBox());
+  } else {
+    /**
+    * 3D 等值区域模式：
+    * 当前用小球群近似表示等值面区域
+    */
+    addObject(createIsoSurfaceGroup(field, colorMap, opacity, isoValue, dataset));
+    addObject(createWireFrameBox());
+  }
+  return function () {
+    objects.forEach(function (obj) {
+      scene.remove(obj);
+      disposeObject3D(obj);
+    });
+  };
+}
+/**
+ * 创建二维热力图平面
+ * 平面上每个顶点根据 field 值着色
+ */
+function createHeatmapPlane(field, colorMap, opacity, dataset, sliceOrigin) {
+  var geometry = new THREE.PlaneGeometry(WORLD_SIZE, WORLD_SIZE, GRID_SIZE - 1, GRID_SIZE - 1);
+  var colors = new Float32Array(GRID_SIZE * GRID_SIZE * 3);
+  var positions = geometry.attributes.position;
+  for (var i = 0; i < positions.count; i++) {
+    var x = positions.getX(i);
+    var y = positions.getY(i);
+    // 将 three.js 场景坐标映射到 0~1 的归一化空间坐标
+    var u = (x + WORLD_SIZE / 2) / WORLD_SIZE;
+    var v = (y + WORLD_SIZE / 2) / WORLD_SIZE;
+    // 根据当前 field，在 dataset 中取值；如果没有 dataset，则走模拟数据
+    var value = sampleFieldValue(dataset, field, u, v, sliceOrigin);
+    var color = getColorByMap(value, colorMap);
+    colors[i * 3] = color.r;
+    colors[i * 3 + 1] = color.g;
+    colors[i * 3 + 2] = color.b;
+  }
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  return new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
+    vertexColors: true,
+    transparent: true,
+    opacity: opacity,
+    side: THREE.DoubleSide
+  }));
+}
+/**
+ * 创建三维表面
+ * 核心做法：
+ * 用 field 值控制平面顶点高度，并通过颜色显示强弱
+ */
+function createSurfaceMesh(field, colorMap, opacity, dataset, sliceOrigin) {
+  var geometry = new THREE.PlaneGeometry(WORLD_SIZE, WORLD_SIZE, GRID_SIZE - 1, GRID_SIZE - 1);
+  var positions = geometry.attributes.position;
+  var colors = new Float32Array(positions.count * 3);
+  for (var i = 0; i < positions.count; i++) {
+    var x = positions.getX(i);
+    var z = positions.getY(i);
+    var u = (x + WORLD_SIZE / 2) / WORLD_SIZE;
+    var v = (z + WORLD_SIZE / 2) / WORLD_SIZE;
+    // 从数据中采样得到该点的物理量值
+    var value = sampleFieldValue(dataset, field, u, v, sliceOrigin);
+    var height = (value - 0.5) * 8; // 将数值映射为表面高度
+
+    positions.setZ(i, height);
+    // 将数值映射为颜色
+    var color = getColorByMap(value, colorMap);
+    colors[i * 3] = color.r;
+    colors[i * 3 + 1] = color.g;
+    colors[i * 3 + 2] = color.b;
+  }
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  geometry.computeVertexNormals();
+  // 旋转成水平朝上的表面
+  var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
+    vertexColors: true,
+    transparent: true,
+    opacity: opacity,
+    side: THREE.DoubleSide,
+    shininess: 45
+  }));
+  mesh.rotation.x = -Math.PI / 2;
+  return mesh;
+}
+/**
+ * 创建切面平面
+ * 这里用 sliceOrigin 表示 x 方向上的切片位置
+ */
+function createSlicePlane(field, colorMap, opacity, sliceOrigin, dataset) {
+  var geometry = new THREE.PlaneGeometry(WORLD_SIZE, WORLD_SIZE, GRID_SIZE - 1, GRID_SIZE - 1);
+  var positions = geometry.attributes.position;
+  var colors = new Float32Array(GRID_SIZE * GRID_SIZE * 3);
+  for (var i = 0; i < positions.count; i++) {
+    var x = positions.getX(i);
+    var y = positions.getY(i);
+    var u = (x + WORLD_SIZE / 2) / WORLD_SIZE;
+    var v = (y + WORLD_SIZE / 2) / WORLD_SIZE;
+    // 固定一个 x 切片位置，在该切面上取值
+    var value = sampleFieldValue(dataset, field, sliceOrigin, u, v);
+    var color = getColorByMap(value, colorMap);
+    colors[i * 3] = color.r;
+    colors[i * 3 + 1] = color.g;
+    colors[i * 3 + 2] = color.b;
+  }
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
+    vertexColors: true,
+    transparent: true,
+    opacity: opacity,
+    side: THREE.DoubleSide
+  }));
+  mesh.rotation.y = Math.PI / 2; // 旋转到 yz 平面
+  mesh.position.x = (sliceOrigin - 0.5) * WORLD_SIZE; // 根据 sliceOrigin 调整切片位置
+  return mesh;
+}
+/**
+ * 创建等值区域
+ * 当前不是工业级 marching cubes
+ * 而是用小球群表示“接近 isoValue 的区域”
+ */
+function createIsoSurfaceGroup(field, colorMap, opacity, isoValue, dataset) {
+  var group = new THREE.Group();
+  var sphereGeometry = new THREE.SphereGeometry(0.42, 14, 14);
+  for (var xi = 0; xi < 14; xi++) {
+    for (var yi = 0; yi < 14; yi++) {
+      for (var zi = 0; zi < 14; zi++) {
+        var u = xi / 13;
+        var v = yi / 13;
+        var w = zi / 13;
+        var value = sampleFieldValue(dataset, field, u, v, w);
+        // 接近阈值的区域用球体表示
+        if (Math.abs(value - isoValue) < 0.06) {
+          var color = getColorByMap(value, colorMap);
+          var material = new THREE.MeshPhongMaterial({
+            color: color,
+            transparent: true,
+            opacity: opacity
+          });
+          var sphere = new THREE.Mesh(sphereGeometry, material);
+          sphere.position.set((u - 0.5) * WORLD_SIZE, (v - 0.5) * WORLD_SIZE, (w - 0.5) * WORLD_SIZE);
+          group.add(sphere);
+        }
+      }
+    }
+  }
+  return group;
+}
+/**
+ * 从 dataset 中按当前 field 取值
+ * 如果 dataset 不存在，则退回模拟函数 getScalarValue
+ */
+function sampleFieldValue(dataset, field, u, v, w) {
+  if (!dataset) {
+    return getScalarValue(u, v, w, field);
+  }
+  // 在 CSV 点集中找最近点
+  var point = findNearestPoint(dataset, u, v, w);
+  var rawValue = point[field];
+  var range = dataset.fieldRanges[field];
+  if (range.max === range.min) return 0.5; // 避免除0
+  return clamp01((rawValue - range.min) / (range.max - range.min)); // 将当前字段归一化到 0~1
+}
+/**
+ * 最近邻采样
+ * 将归一化坐标 u,v,w 映射回真实坐标范围
+ * 再在 dataset.points 中找最近点
+ */
+function findNearestPoint(dataset, u, v, w) {
+  var x = lerp(dataset.xMin, dataset.xMax, clamp01(u));
+  var y = lerp(dataset.yMin, dataset.yMax, clamp01(v));
+  var z = lerp(dataset.zMin, dataset.zMax, clamp01(w));
+  var best = dataset.points[0];
+  var bestDist = Number.MAX_VALUE;
+  for (var i = 0; i < dataset.points.length; i++) {
+    var p = dataset.points[i];
+    var dx = p.x - x;
+    var dy = p.y - y;
+    var dz = p.z - z;
+    var dist = dx * dx + dy * dy + dz * dz;
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = p;
+    }
+  }
+  return best;
+}
+/**
+ * 将 CSV 文本解析为 GridDataset
+ * 这里会：
+ * 1. 检查表头
+ * 2. 转为点数组
+ * 3. 统计坐标范围
+ * 4. 统计各字段 min/max
+ */
+function parseCsvToDataset(text) {
+  var lines = text.split(/\r?\n/).map(function (line) {
+    return line.trim();
+  }).filter(Boolean);
+  if (lines.length < 2) {
+    throw new Error('CSV empty');
+  }
+  var header = lines[0].split(',').map(function (s) {
+    return s.trim();
+  });
+  var indexMap = {};
+  header.forEach(function (name, idx) {
+    indexMap[name] = idx;
+  });
+  //检查必填字段
+  var required = ['x', 'y', 'z', 'pressure', 'temperature', 'velocity', 'vorticity', 'mach'];
+  required.forEach(function (name) {
+    if (indexMap[name] === undefined) {
+      throw new Error("CSV missing column: " + name);
+    }
+  });
+  //从每一行生成点数据
+  var points = lines.slice(1).map(function (line) {
+    var cols = line.split(',').map(function (s) {
+      return s.trim();
+    });
+    return {
+      x: Number(cols[indexMap.x]),
+      y: Number(cols[indexMap.y]),
+      z: Number(cols[indexMap.z]),
+      pressure: Number(cols[indexMap.pressure]),
+      temperature: Number(cols[indexMap.temperature]),
+      velocity: Number(cols[indexMap.velocity]),
+      vorticity: Number(cols[indexMap.vorticity]),
+      mach: Number(cols[indexMap.mach])
+    };
+  });
+  //提取每个坐标轴上的唯一值
+  var xValues = uniqueSorted(points.map(function (p) {
+    return p.x;
+  }));
+  var yValues = uniqueSorted(points.map(function (p) {
+    return p.y;
+  }));
+  var zValues = uniqueSorted(points.map(function (p) {
+    return p.z;
+  }));
+  var xMin = xValues[0];
+  var xMax = xValues[xValues.length - 1];
+  var yMin = yValues[0];
+  var yMax = yValues[yValues.length - 1];
+  var zMin = zValues[0];
+  var zMax = zValues[zValues.length - 1];
+  //统计每个物理量范围
+  var fields = ['pressure', 'temperature', 'velocity', 'vorticity', 'mach'];
+  var fieldRanges = {};
+  fields.forEach(function (field) {
+    var values = points.map(function (p) {
+      return p[field];
+    });
+    fieldRanges[field] = {
+      min: Math.min.apply(null, values),
+      max: Math.max.apply(null, values)
+    };
+  });
+  return {
+    points: points,
+    xValues: xValues,
+    yValues: yValues,
+    zValues: zValues,
+    xMin: xMin,
+    xMax: xMax,
+    yMin: yMin,
+    yMax: yMax,
+    zMin: zMin,
+    zMax: zMax,
+    fieldRanges: fieldRanges
+  };
+}
+//数组去重并排序
+function uniqueSorted(values) {
+  var set = {};
+  values.forEach(function (v) {
+    set[String(v)] = true;
+  });
+  return Object.keys(set).map(function (v) {
+    return Number(v);
+  }).sort(function (a, b) {
+    return a - b;
+  });
+}
+//线性插值
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+/**
+ * 创建线框包围盒
+ * 用于辅助观察 3D 空间边界
+ */
+function createWireFrameBox() {
+  var geometry = new THREE.BoxGeometry(WORLD_SIZE, WORLD_SIZE, WORLD_SIZE);
+  var edges = new THREE.EdgesGeometry(geometry);
+  var material = new THREE.LineBasicMaterial({
+    color: 0x6fa8ff,
+    transparent: true,
+    opacity: 0.35
+  });
+  return new THREE.LineSegments(edges, material);
+}
+/**
+ * 默认模拟函数
+ * 当没有真实 CSV 数据时，用这个函数生成演示场
+ */
+function getScalarValue(u, v, w, field) {
+  switch (field) {
+    case 'velocity':
+      return clamp01(0.5 + 0.5 * Math.sin(2 * Math.PI * u) * Math.cos(2 * Math.PI * v));
+    case 'pressure':
+      return clamp01(0.5 + 0.35 * Math.sin(3 * Math.PI * u) + 0.15 * Math.cos(2 * Math.PI * w));
+    case 'temperature':
+      return clamp01((u + v + w) / 3);
+    case 'vorticity':
+      return clamp01(0.5 + 0.5 * Math.sin(4 * Math.PI * u) * Math.sin(4 * Math.PI * v) * Math.cos(2 * Math.PI * w));
+    case 'mach':
+      return clamp01(Math.sqrt((u * u + v * v + w * w) / 3));
+    default:
+      return 0.5;
+  }
+}
+//限制数值在0~1
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
+/**
+ * 根据色带名称和归一化数值，得到最终颜色
+ */
+function getColorByMap(value, colorMap) {
+  var stops = getColorStops(colorMap);
+  return sampleColorStops(stops, value);
+}
+function getColorStops(colorMap) {
+  switch (colorMap) {
+    case 'jet':
+      return ['#00007f', '#004cff', '#29b6ff', '#7dff7a', '#ffe600', '#ff7a00', '#cc0000'];
+    case 'coolwarm':
+      return ['#3b4cc0', '#6f92f3', '#c8d8f0', '#f2cbb7', '#e67c73', '#b40426'];
+    case 'rainbow':
+      return ['#6a00ff', '#005eff', '#00c8ff', '#00d26a', '#ffe600', '#ff8c00', '#ff003c'];
+    case 'viridis':
+      return ['#440154', '#414487', '#2a788e', '#22a884', '#7ad151', '#fde725'];
+    default:
+      return ['#000000', '#ffffff'];
+  }
+}
+/**
+ * 在颜色控制点之间做线性插值
+ * 这样可以让颜色连续变化
+ */
+function sampleColorStops(stops, t) {
+  var value = clamp01(t);
+  var scaled = value * (stops.length - 1);
+  var index = Math.floor(scaled);
+  var ratio = scaled - index;
+  var c1 = new THREE.Color(stops[index]);
+  var c2 = new THREE.Color(stops[Math.min(index + 1, stops.length - 1)]);
+  return new THREE.Color(c1.r + (c2.r - c1.r) * ratio, c1.g + (c2.g - c1.g) * ratio, c1.b + (c2.b - c1.b) * ratio);
+}
+/**
+ * 销毁 three.js 对象所占资源
+ * 包括 geometry 和 material
+ */
+function disposeObject3D(object) {
+  object.traverse(function (child) {
+    var mesh = child;
+    if (mesh.geometry) {
+      mesh.geometry.dispose();
+    }
+    var material = mesh.material;
+    if (Array.isArray(material)) {
+      material.forEach(function (m) {
+        return m && m.dispose && m.dispose();
+      });
+    } else if (material && material.dispose) {
+      material.dispose();
+    }
+  });
+}