Three.js从Blob加载OBJ文件失败，报TypeError: text.indexOf is not a function

问题原因 #

报错TypeError: text.indexOf is not a function是因为OBJLoader的parse()方法需要传入文本字符串，但你传入的是ArrayBuffer类型的数据，而ArrayBuffer没有indexOf方法，导致解析失败。STLLoader的parse()支持ArrayBuffer（适配二进制STL格式），所以你的STL加载逻辑可以正常工作。

修正后的代码 #

async loadObj(blob) {
    var loader = new OBJLoader();
    // 将Blob转为文本字符串，而非ArrayBuffer
    const text = await blob.text();
    const object = loader.parse(text);
    const material = new THREE.MeshPhysicalMaterial({});
    // OBJLoader.parse返回Object3D（可能包含多个Mesh），遍历为子网格设置材质
    object.traverse(child => {
        if (child.isMesh) {
            child.material = material;
        }
    });
    scene.add(object);
}

// 原STL加载代码保持不变
async loadStl(blob) {
    const loader = new STLLoader();
    const arrayBuffer = await blob.arrayBuffer();
    const geometry = loader.parse(arrayBuffer);
    const material = new THREE.MeshPhysicalMaterial({});
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

额外说明 #

• OBJ文件属于文本格式，必须通过blob.text()读取内容后再传入OBJLoader.parse()。
• OBJLoader.parse()返回的是THREE.Object3D实例（可能包含多个网格、组结构），需要通过traverse遍历子元素为网格设置材质，不能直接用THREE.Mesh包裹。

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