如何在可配置JSON文件中存储JS函数引用以生成WebGL网格？

核心问题定位 #

你在SceneLoader.loadMesh方法里的Mesh类方法调用语法有误，同时没有处理不同生成方法的参数差异问题，导致无法正确触发对应的网格生成函数。

修正后的loadMesh实现 #

static loadMesh(gl, program, obj, materials){
    const meshMethod = Mesh[obj['mesh']];
    // 先检查目标方法是否存在
    if (typeof meshMethod !== 'function') {
        throw new Error(`Mesh类未定义${obj['mesh']}静态方法`);
    }
    const targetMaterial = materials[obj['material']];
    if (!targetMaterial) {
        throw new Error(`找不到名为${obj['material']}的材质`);
    }
    // 展开options数组适配不同参数数量的生成方法，再拼接材质参数
    return meshMethod(gl, program, ...obj['options'], targetMaterial);
}

关键修正点说明 #

1. 动态调用静态方法：JavaScript中类的静态方法挂载在类本身的属性上，所以要用Mesh[obj['mesh']]获取对应方法，而非错误的Mesh.obj['mesh']。
2. 参数适配：使用扩展运算符...将JSON里的options数组展开为单个参数，完美适配不同生成方法的参数数量（比如uv_sphere的单个细分参数、box的三个尺寸参数）。
3. 错误校验：增加方法和材质的存在性检查，避免因配置笔误导致的静默失败，方便调试定位问题。

现有JSON配置的兼容性 #

你当前的JSON格式完全可用，比如orb_mesh的options: [24]会被自动展开为单个参数，匹配Mesh.uv_sphere(gl, program, subdivs, material)的参数列表。

额外优化建议 #

• 替换同步XHR：readStringFromFileAtPath里的同步请求会阻塞主线程，建议改成异步Promise实现，避免页面卡顿。
• 配置参数容错：可以给options设置默认空数组，避免未配置时的参数错误。

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