kd-wellbore-3D-imaging

全井筒坍塌/破裂 3D 成像 Vue 3 组件。

主要特点

• 全井筒井径轨迹 + 密度热力图三维可视化
• 自由调整井径比例，一键切换坍塌/破裂模式
• 多主题支持（white / dark / gray）
• 鼠标悬停查看轨迹点位详细信息

安装

npm install kd-wellbore-3d-imaging

环境要求：Vue 3.x、three 0.163.0+

快速开始

注意：CSS 文件需单独引入，否则组件无样式。

全局注册

import { createApp } from "vue";
import App from "./App.vue";
import { Wellbore3dImaging } from "kd-wellbore-3d-imaging";
import "kd-wellbore-3d-imaging/dist/kd-wellbore-3d-imaging.css";

const app = createApp(App);
app.use(Wellbore3dImaging);
app.mount("#app");

局部注册

<template>
  <Wellbore3dImaging ref="wellboreRef" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Wellbore3dImaging } from "kd-wellbore-3d-imaging";
import "kd-wellbore-3d-imaging/dist/kd-wellbore-3d-imaging.css";

const wellboreRef = ref(null);

onMounted(async () => {
  wellboreRef.value.createCompleteWellbore(data);
  wellboreRef.value.changeColorType("collapse");
});
</script>

API

通过组件 ref 暴露以下方法：

| 方法 | 参数 | 说明 | |---|---|---| | createScene() | dom | 创建 3D 场景 | | dispose() | 无 | 销毁场景，释放内存 | | fresh() | 无 | 销毁并重建场景 | | createCompleteWellbore(data) | 井筒数据对象 | 创建全井筒轨迹与热力图 | | changeColorType(type) | "collapse" / "fracture" | 切换坍塌/破裂热力图 | | setRadiusScale(scale) | 数字 | 调整井径缩放倍数 | | changeStyle(theme) | "white" / "dark" / "gray" | 切换场景背景主题 |

数据格式

createCompleteWellbore(data) 接受以下结构：

{
  "data": {
    "points": [{
      "MD": 3249.5,
      "TVD": 3183.2313,
      "actual_inc_deg": 6.0571,
      "actual_az_deg": 275.7711,
      "caliper_mm": 180.594,
      "bit_size_mm": null,
      "az_deg": [0, 10, 20, /* ... 0-360 */],
      "Pc_MPa": [/* 坍塌压力 */],
      "collapse_density_g_cc": [/* 坍塌密度 */],
      "Pf_init_MPa": [/* 破裂压力 */],
      "fracture_density_g_cc": [/* 破裂密度 */]
    },
    // ... 更多测深点
    ]
  }
}

License

MIT