如何在Angular与.NET Core架构下本地存储并加载SVF至Autodesk Viewer

1. 下载完整SVF包到NFS #

翻译完成后，需先获取衍生资源清单，再按原目录结构批量下载所有SVF相关资源到NFS：

操作步骤： #

• 调用GET /modelderivative/v2/designdata/{urn}/manifest接口，获取模型的完整衍生清单
• 在清单的derivatives数组中找到outputType为svf的条目，遍历其children节点（包含.svf、.bin、.sqlite、纹理图等所有依赖资源）
• 对每个资源，调用GET /modelderivative/v2/designdata/{urn}/manifest/{derivativeUrn}接口下载文件，其中derivativeUrn为资源的urn字段值
• 保存文件时，严格保留资源path字段的目录结构（如svf/abc123/model.svf），在NFS上创建对应目录后写入文件

.NET Core代码示例（基于Forge SDK）： #

// 假设已通过SDK获取到manifest对象
var manifest = await derivativeApi.GetManifestAsync(urn);
var svfDerivative = manifest.Derivatives.First(d => d.OutputType == "svf");

foreach (var child in svfDerivative.Children)
{
    // 调用SDK获取资源流
    var resourceStream = await derivativeApi.GetDerivativeManifestAsync(urn, child.Urn);
    // 构建NFS保存路径，保留原目录结构
    var savePath = Path.Combine("/nfs/storage", urn, child.Path);
    var dirPath = Path.GetDirectoryName(savePath);
    
    if (!Directory.Exists(dirPath))
    {
        Directory.CreateDirectory(dirPath);
    }
    // 写入文件到NFS
    using var fileStream = new FileStream(savePath, FileMode.Create);
    await resourceStream.CopyToAsync(fileStream);
}

2. 后端从NFS传递文件到前端 #

在.NET Core中实现静态文件服务接口，处理前端的文件请求并返回NFS上的资源：

操作步骤： #

• 配置CORS规则，允许前端Angular域名的跨域请求
• 编写API接口，解析前端传入的模型URN和文件路径，拼接NFS上的完整路径
• 读取文件并返回，根据文件后缀设置正确的Content-Type

.NET Core代码示例： #

[HttpGet("api/model/{urn}/{*filePath}")]
public IActionResult GetModelResource(string urn, string filePath)
{
    var fullFilePath = Path.Combine("/nfs/storage", urn, filePath);
    if (!System.IO.File.Exists(fullFilePath))
    {
        return NotFound();
    }

    // 根据文件后缀设置响应Content-Type
    var contentType = GetContentType(fullFilePath);
    return PhysicalFile(fullFilePath, contentType);
}

private string GetContentType(string filePath)
{
    var ext = Path.GetExtension(filePath).ToLowerInvariant();
    return ext switch
    {
        ".svf" => "application/octet-stream",
        ".bin" => "application/octet-stream",
        ".sqlite" => "application/sqlite3",
        ".png" => "image/png",
        ".jpg" => "image/jpeg",
        _ => "application/octet-stream"
    };
}

// Program.cs中配置CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("http://your-angular-domain.com")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

app.UseCors("AllowAngular");

3. 配置Autodesk Viewer加载本地SVF #

替换Viewer默认的资源加载逻辑，使其从后端接口获取文件，而非Autodesk云：

操作步骤： #

• 自定义ResourceLoader类，重写load方法，将请求URL替换为后端接口地址
• 初始化Viewer后，设置使用自定义加载器
• 调用loadModel方法，传入后端提供的SVF文件URL及属性数据库路径

Angular代码示例： #

// 初始化Viewer容器
const container = document.getElementById('viewer-container');
const viewer = new Autodesk.Viewing.GuiViewer3D(container);
viewer.start();

// 自定义资源加载器
class LocalResourceLoader extends Autodesk.Viewing.ResourceLoader {
    constructor(viewer) {
        super(viewer);
    }

    load(url, onSuccess, onError, options) {
        // 替换为后端接口路径，需提前获取当前模型的URN
        const modelUrn = 'your-target-model-urn';
        // 截取原URL中的相对路径，拼接后端接口
        const localUrl = `/api/model/${modelUrn}/${url.split('/').slice(2).join('/')}`;
        super.load(localUrl, onSuccess, onError, options);
    }
}

// 配置Viewer使用自定义加载器
viewer.setResourceLoader(new LocalResourceLoader(viewer));

// 加载本地SVF模型
const svfUrl = `/api/model/${modelUrn}/svf/abc123/model.svf`; // 替换为实际SVF路径
viewer.loadModel(svfUrl, {
    sharedPropertyDbPath: `/api/model/${modelUrn}/svf/abc123/properties.db` // 对应下载的sqlite文件路径
});

关键注意点： #

• 后端返回的文件路径需与Viewer请求的路径完全匹配，保留原SVF包的目录结构
• sharedPropertyDbPath必须指向对应的properties.db文件（即下载的.sqlite文件），否则Viewer无法加载模型属性

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