一、技术背景与核心价值 Node.js的Stream API是处理大规模数据的基石，其非阻塞、流式处理特性完美解决了内存溢出问题。无论是实时日志处理、大文件传输，还是API响应流，Stream都能通过

一、技术背景与优势解析 当需要渲染大量同类型物体（如星空、雨滴、粒子特效）时，传统逐个创建网格的方式会导致性能急剧下降。Three.js的InstancedBufferGeometry通过实例化渲染技

1. 为什么选择BufferGeometry？

在Three.js开发中，几何体创建是3D建模的基础。相比传统Geometry，BufferGeometry具有显著优势：

• ‌内存效率‌：采用TypedArray存储顶点数据，内存占用减少40%
• ‌渲染性能‌：直接对接WebGL缓冲区，减少CPU-GPU数据传输
• ‌灵活性‌：支持动态更新顶点数据
• ‌扩展性‌：可处理百万级顶点的复杂模型

2. 基础创建流程

2.1 创建空几何体

const geometry = new THREE.BufferGeometry();

2.2 定义顶点数据

// 创建包含12个顶点的立方体（每个面2个三角形）
const vertices = new Float32Array([
  // 前表面
  -1, -1,  1,  // 0
   1, -1,  1,  // 1
   1,  1,  1,  // 2
  -1,  1,  1,  // 3
  
  // 后表面
  -1, -1, -1,  // 4
   1, -1, -1,  // 5
  // ...（完整顶点数据）
]);

// 创建并设置顶点属性
geometry.setAttribute(
  'position', 
  new THREE.BufferAttribute(vertices, 3)
);

2.3 定义索引数据（可选优化）

const indices = new Uint16Array([
  // 前表面
  0, 1, 2,  2, 3, 0,
  
  // 顶部表面
  2, 3, 7,  7, 6, 2,
  // ...（完整索引数据）
]);

geometry.setIndex(new THREE.BufferAttribute(indices, 1));

3. 高级属性配置

3.1 添加法线向量

const normals = new Float32Array(vertices.length);
for (let i = 0; i < vertices.length; i += 9) {
  // 计算三角形法线
  const vA = new THREE.Vector3(...vertices.slice(i, i+3));
  const vB = new THREE.Vector3(...vertices.slice(i+3, i+6));
  const vC = new THREE.Vector3(...vertices.slice(i+6, i+9));
  
  const cb = new THREE.Vector3().subVectors(vC, vB);
  const ab = new THREE.Vector3().subVectors(vA, vB);
  const normal = new THREE.Vector3()
    .crossVectors(cb, ab)
    .normalize();

  // 为每个顶点设置法线
  normals.set([...normal.toArray()], i);
  normals.set([...normal.toArray()], i+3);
  normals.set([...normal.toArray()], i+6);
}

geometry.setAttribute(
  'normal',
  new THREE.BufferAttribute(normals, 3)
);

3.2 添加UV坐标

const uvs = new Float32Array([
  // 前表面UV
  0, 0, 
  1, 0,
  1, 1,
  0, 1,
  
  // 其他面UV坐标...
]);

geometry.setAttribute(
  'uv',
  new THREE.BufferAttribute(uvs, 2)
);

4. 性能优化技巧

4.1 内存复用策略

// 创建可复用数组
const vertexPool = new Float32Array(300000); // 预分配内存

function updateGeometry(geometry) {
  const positions = geometry.attributes.position;
  
  // 直接修改已存在的BufferAttribute
  for (let i = 0; i < positions.count; i++) {
    positions.array[i * 3] += Math.random() * 0.1; // X坐标
    positions.array[i * 3 + 1] *= 0.95; // Y坐标
  }
  
  positions.needsUpdate = true;
}

4.2 几何体合并

const geometries = [];
const material = new THREE.MeshStandardMaterial();

// 生成多个几何体
for (let i = 0; i < 100; i++) {
  const geom = new THREE.BufferGeometry();
  // ...配置几何体
  geometries.push(geom);
}

// 合并几何体
const mergedGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries(
  geometries
);

const mesh = new THREE.Mesh(mergedGeometry, material);
scene.add(mesh);

5. 动态几何体示例：波浪平面

// 初始化平面
const WIDTH_SEGMENTS = 128;
const SIZE = 20;

const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(
  (WIDTH_SEGMENTS + 1) ** 2 * 3
);
const uvs = new Float32Array(
  (WIDTH_SEGMENTS + 1) ** 2 * 2
);

// 生成初始顶点
let vertexIndex = 0;
for (let y = 0; y <= WIDTH_SEGMENTS; y++) {
  for (let x = 0; x <= WIDTH_SEGMENTS; x++) {
    positions[vertexIndex * 3] = 
      (x / WIDTH_SEGMENTS) * SIZE - SIZE/2;
    positions[vertexIndex * 3 + 1] = 0;
    positions[vertexIndex * 3 + 2] = 
      (y / WIDTH_SEGMENTS) * SIZE - SIZE/2;
    
    uvs[vertexIndex * 2] = x / WIDTH_SEGMENTS;
    uvs[vertexIndex * 2 + 1] = y / WIDTH_SEGMENTS;
    
    vertexIndex++;
  }
}

// 设置几何体属性
geometry.setAttribute(
  'position',
  new THREE.BufferAttribute(positions, 3)
);
geometry.setAttribute(
  'uv',
  new THREE.BufferAttribute(uvs, 2)
);

// 创建动画效果
function animate() {
  const positions = geometry.attributes.position.array;
  const time = performance.now() * 0.001;
  
  for (let i = 0; i < positions.length; i += 3) {
    positions[i + 1] = Math.sin(
      positions[i] * 0.5 + positions[i+2] * 0.3 + time
    ) * 1.5;
  }
  
  geometry.attributes.position.needsUpdate = true;
}

6. 常见问题解决方案

6.1 内存管理

// 正确释放内存
function disposeGeometry(geometry) {
  geometry.dispose();
  geometry.attributes.position.array = null;
  geometry = null;
}

6.2 顶点更新优化

// 使用共享ArrayBuffer
const sharedBuffer = new ArrayBuffer(1024 * 1024);
const positions = new Float32Array(sharedBuffer);
const normals = new Float32Array(sharedBuffer);

7. 完整应用案例

// 创建参数化圆柱体
function createCylinder(radiusTop, radiusBottom, height, radialSegments) {
  const geometry = new THREE.BufferGeometry();
  const vertices = [];
  const uvs = [];

  // 生成侧面顶点
  for (let y = 0; y <= 1; y++) {
    const radius = y ? radiusTop : radiusBottom;
    for (let i = 0; i <= radialSegments; i++) {
      const angle = (i / radialSegments) * Math.PI * 2;
      vertices.push(
        Math.cos(angle) * radius,
        height * (y - 0.5),
        Math.sin(angle) * radius
      );
      uvs.push(i / radialSegments, y);
    }
  }

  // 设置几何属性
  geometry.setAttribute(
    'position',
    new THREE.BufferAttribute(new Float32Array(vertices), 3)
  );
  geometry.setAttribute(
    'uv',
    new THREE.BufferAttribute(new Float32Array(uvs), 2)
  );

  return geometry;
}

掌握BufferGeometry的使用可以显著提升Three.js应用的性能表现，特别适用于以下场景：

• 大数据量可视化（如地图、分子模型）
• 动态几何体（实时变形、粒子系统）
• 程序化生成模型（参数化建模）
• WebXR等高性能要求场景

建议通过实际项目加深理解，可以先从修改现有几何体参数开始，逐步尝试完整几何体创建流程。

背景

在生产中我们经常会遇到一些基于UI库二次封装的场景，我认为二次封装对于老手来说没有什么难点，只不过是业务上的变化，但是对于新手或者其他框架的开发者，不免有些抓耳挠腮，我呢又恰巧有机会和时间，就留一些文章在这里供有需要的人互相参考和大家一起讨论。

需求描述

如上图所示，表格，抽屉，确认框，在用户意外关闭的时候进行提示，正常提交的时候不需要提示

实现步骤

第一，我们要整理关键线索，从element-plus文档中可以看到before-close 点击mask关闭时会触发，@close 弹框关闭时会触发，有了以上线索我们就可以进行二次封装了，那么为了实用方便，我们要尽量把二次封装做的像普通drawer使用。

下面跟着我的思路来实现一下

新建Drawer.vue文件

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
// 是否显示弹框
const showModal = ref(false)

const props = defineProps({
  // 控制是否提示
  closeConfirm: propTypes.bool.def(false)
})

const emit = defineEmits(['update:modelValue'])
// 封装确认弹框
const showConfirm = async () => {
  if (!props.closeConfirm) return true
  try {
    await ElMessageBox.confirm('确定要关闭吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    return true
  } catch {
    return false
  }
}

/** 是否是关闭拦截 */
const isBeforeClose = ref(false)
// 关闭拦截
const handleBeforeClose = async (done: () => void) => {
  const shouldClose = await showConfirm()
  if (shouldClose) {
    // 设置拦截标志
    isBeforeClose.value = true
    // 放开拦截
    done()
    // 关闭弹窗
    handleShowModal(false)
  }
}
// 点击Icon 关闭
const handleClose = async () => {
  const shouldClose = await showConfirm()
  if (shouldClose) {
    // 设置拦截标志
    isBeforeClose.value = true
    // 关闭弹窗
    handleShowModal(false)
  }
}

// 监听 modelValue 的变化
watch(
  () => props.modelValue,
  async (newVal) => {
    if (newVal) {
      // 打开表格
      handleShowModal(true)
      return
    }
    // 当外部绑定变量设置关闭，并且拦截标志为false,则通过监听拦截
    if (!newVal && !isBeforeClose.value) {
      isBeforeClose.value = true
      // 等待弹框验证
      const shouldClose = await showConfirm()
      // 验证为确定,模态框关闭
      handleShowModal(!shouldClose)
    }
    // 每次状态变化都还原拦截默认值
    isBeforeClose.value = false
  }
)
// 打开弹窗方法，同步外部响应式变量
const handleShowModal = (value: boolean) => {
  // 打开表格
  showModal.value = value
  // 同步外部变量
  emit('update:modelValue', value)
}
</script>

<template>
  <ElDrawer
    :model-value="showModal"
    :close-on-click-modal="true"
    destroy-on-close
    lock-scroll
    :show-close="false"
    :before-close="handleBeforeClose"
  >
    <template #header>
      <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">
        <slot name="title">
          {{ title }}
        </slot>
        <div
          class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between"
        >
          <Icon
            class="is-hover cursor-pointer"
            icon="ep:close"
            hover-color="var(--el-color-primary)"
            color="var(--el-color-info)"
            @click="handleClose"
          />
        </div>
      </div>
    </template>

    <ElScrollbar v-if="scroll" :style="dialogStyle">
      <slot></slot>
    </ElScrollbar>
    <slot v-else></slot>

    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </ElDrawer>
</template>

上面就完成了二次封装的组件，下面去使用

在使用之前，创建一个hooks组件来应付一般场景，创建useDrawer.ts文件

// 抽屉控制变量显示
export const useDrawerFlag = (title: string = "") => {
    // 弹框标题
    const dialogTitle = ref(title)
    // 抽屉显示控制
    const dialogVisible = ref(false)
    // 关闭时是否检查确认框
    const closeConfirm = ref(true)
    // 确认抽屉关闭并取消提示
    const ConfirmDrawerVisible = () =>{
        closeConfirm.value = false
        dialogVisible.value = false
        // 异步还原弹框检测默认值
        setTimeout(()=>{
            closeConfirm.value = true
        },500)
    }

    return {
        dialogVisible,
        dialogTitle,
        closeConfirm,
        ConfirmDrawerVisible
    }
}

有了这个文件，我们就可以统一使用二次封装好的组件，和必要的参数方法，为什么封装了ConfirmDrawerVisible方法？

qaq: 因为我们的drawer里面可能会放表单，一般表单会需要验证，通过后直接关闭，不需要二次确认，所以有了这个方法的封装，那接下来看下使用的代码

使用代码

<template>
  <Drawer :title="dialogTitle" v-model="dialogVisible" :closeConfirm="closeConfirm">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="父分类id" prop="parentId">
        <el-tree-select
          v-model="formData.parentId"
          :data="categoryTree"
          :props="defaultProps"
          check-strictly
          default-expand-all
          placeholder="请选择父分类id"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Drawer>
</template>
<script setup lang="ts">
import { useDrawerFlag } from '@/hooks/web/useDrawer'

// 使用hooks封装
const { closeConfirm, dialogVisible, dialogTitle, ConfirmDrawerVisible } = useDrawerFlag()

/** IOT产品分类 表单 */
defineOptions({ name: 'CategoryForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  parentId: undefined,
  name: undefined,
  sort: undefined,
  status: undefined,
  imgUrl: undefined
  // isSys: undefined
})
const formRules = reactive({
  parentId: [{ required: true, message: '父分类id不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
  // isSys: [{ required: true, message: '是否系统通用不能为空', trigger: 'blur' }]
})

const formRef = ref() // 表单 Ref
const categoryTree = ref() // 树形结构

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await CategoryApi.getCategory(id)
    } finally {
      formLoading.value = false
    }
  }
  await getCategoryTree()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as CategoryVO
    if (formType.value === 'create') {
      await CategoryApi.createCategory(data)
      message.success(t('common.createSuccess'))
    } else {
      await CategoryApi.updateCategory(data)
      message.success(t('common.updateSuccess'))
    }
    // 关闭弹框
    ConfirmDrawerVisible()
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    parentId: undefined,
    name: undefined,
    sort: undefined,
    status: undefined,
    imgUrl: undefined
    // isSys: undefined
  }
  formRef.value?.resetFields()
}
</script>

总结

看这样就可以到处去用了，虽然是一个小功能，但是里面也需要花时间协调逻辑，如果你觉得有用，请三连~~