如何用Vue3+Three.js+TypeScript加载VTK文件？遇类型错误求助

错误原因 #

报错TypeError: THREE.BufferAttribute: array should be a Typed Array是因为VTKLoader解析生成的几何体属性数组是普通JS数组，而Three.js的BufferAttribute要求必须是Typed Array（如Float32Array、Uint32Array等）。

解决方案1：修复现有Loader返回的几何体 #

在加载回调中手动遍历几何体属性，将普通数组转换为Typed Array：

import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader';      
const loader = new VTKLoader();
loader.load('./temperature0.vtk',
  (geometry: any) => {
    // 转换所有属性数组为Typed Array
    for (const key in geometry.attributes) {
      const attr = geometry.attributes[key];
      if (attr.array && !(attr.array instanceof TypedArray)) {
        // 顶点坐标用Float32Array即可
        attr.array = new Float32Array(attr.array);
      }
    }
    geometry.computeVertexNormals();
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  },
  (xhr) => console.log(`加载进度: ${(xhr.loaded / xhr.total * 100)}%`),
  (err) => console.error('加载失败:', err)
);

解决方案2：手动解析VTK文件（更可靠） #

如果原生VTKLoader对文件格式支持有限，可直接读取文件文本并手动解析构建几何体：

fetch('./temperature0.vtk')
  .then(res => res.text())
  .then(text => {
    const lines = text.split('\n').map(line => line.trim()).filter(line => line);
    let isReadingPoints = false;
    let isReadingPolygons = false;
    const vertices: number[] = [];
    const indices: number[] = [];

    for (const line of lines) {
      if (line.startsWith('POINTS')) {
        isReadingPoints = true;
        continue;
      }
      if (line.startsWith('POLYGONS')) {
        isReadingPoints = false;
        isReadingPolygons = true;
        continue;
      }
      // 读取顶点坐标
      if (isReadingPoints) {
        vertices.push(...line.split(/\s+/).map(Number));
      }
      // 读取面索引（跳过第一个表示顶点数的数值）
      if (isReadingPolygons) {
        const parts = line.split(/\s+/).map(Number);
        indices.push(...parts.slice(1));
      }
    }

    // 构建BufferGeometry
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
    geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));
    geometry.computeVertexNormals();

    // 创建网格并添加到场景
    const material = new THREE.MeshLambertMaterial({ color: 0xff0000, side: THREE.DoubleSide });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  })
  .catch(err => console.error('VTK文件加载解析失败:', err));

额外注意事项 #

• 确保你的VTK文件格式符合规范，比如开头包含# vtk DataFile Version 3.0声明，且是VTKLoader支持的类型（如PolyData、Structured Points）。
• MeshBasicMaterial不响应光照，若需要显示光影效果，可替换为MeshLambertMaterial或MeshPhongMaterial，同时记得给场景添加AmbientLight和DirectionalLight等光源。

内容的提问来源于stack exchange，提问作者Prune