GLTF多段互通的离线存储代码使用选择按钮选取文件保存按钮保存文件搜索框搜索并显示已经存储的GLTF模型可投入使用代码

GLTF (GL Transmission Format) 是一种用于传输 3D 模型的数据标准，支持多种文件格式和纹理。在创建一个多段互通的离线存储应用，你可以使用 HTML5 的 File API、localStorage 或 IndexedDB 来处理文件操作。以下是一个简单的示例，展示了如何使用 JavaScript 实现这样的功能：

1. **HTML 结构**:

<input type="file" id="fileInput" accept=".gltf">
<button onclick="saveModel()">保存</button>
<select id="modelList"></select>
<input type="text" id="searchBox" onkeyup="searchModels()" placeholder="搜索模型...">

2. **JavaScript 代码**:

let models = []; // 存储已加载的 GLTF 模型
const modelList = document.getElementById('modelList');
const fileInput = document.getElementById('fileInput');
const searchBox = document.getElementById('searchBox');

// 加载文件并解析为GLTF
async function loadModel(file) {
  const reader = new FileReader();
  reader.onload = async () => {
    try {
      const gltfData = await JSON.parse(reader.result);
      models.push(gltfData);
      modelList.innerHTML += `<option value="${gltfData.uri}">${gltfData.name}</option>`;
    } catch (err) {
      console.error("Error loading GLTF:", err);
    }
  };
  reader.readAsText(file);
}

// 保存模型
function saveModel() {
  const selectedModel = modelList.value;
  localStorage.setItem('selectedModel', selectedModel);
}

// 搜索模型
function searchModels() {
  const query = searchBox.value.toLowerCase();
  modelList.innerHTML = models.filter(model =>
    model.name.toLowerCase().includes(query)
  ).map(model => `<option value="${model.uri}">${model.name}</option>`);
}

// 初始化加载已存在本地的模型
window.addEventListener('load', () => {
  const storedModel = localStorage.getItem('selectedModel');
  if (storedModel) {
    loadModel(new File([storedModel], 'model.gltf'));
  }
});

在这个示例中，用户通过文件输入选择 GLTF 文件，然后`loadModel`函数读取文件内容并解析为 GLTF 数据。已加载的模型会添加到下拉列表供选择。搜索框允许用户查找已存储的模型。当用户点击保存按钮时，当前选中的模型会被保存到浏览器的本地存储。

请注意，这只是一个基础版本，实际项目中可能需要更完善的功能如错误处理和兼容性检查。此外，这个例子假设所有模型都已事先加载到内存中，对于大容量模型，可能需要使用流式处理或分块加载。