在three-gltf-viewer中预加载默认3D模型的技术实现

three-gltf-viewer是一个基于three.js的开源3D模型查看器，它提供了拖放界面来预览glTF格式的3D模型。本文将详细介绍如何修改该项目，使其能够自动加载预定义的3D模型，而不需要用户手动上传文件。

项目背景与需求

在实际应用中，我们有时需要为技术能力有限的用户（如相关机构工作人员）提供一个开箱即用的3D模型查看体验。这些用户可能不熟悉如何获取或上传3D模型文件，但他们仍然需要查看特定的3D模型。通过修改three-gltf-viewer，我们可以实现这一目标。

关键技术实现

1. 自动加载模型的JavaScript实现

核心思路是在页面加载完成后，自动调用查看器的API来加载指定的模型文件。以下是实现代码：

function waitForViewerApp() {
    if (window.VIEWER && window.VIEWER.app) {
        const app = window.VIEWER.app;
        const modelPath = "/Lj36_jlp_1_frames_40-50_current.gltf"; 
        
        if (!app.viewer) {
            app.createViewer();
        }

        if (app.viewer) {
            app.view(modelPath, '', new Map());
        } else {
            setTimeout(waitForViewerApp, 100);
        }
    } else {
        setTimeout(waitForViewerApp, 100);
    }
}

document.addEventListener("DOMContentLoaded", () => {
    waitForViewerApp();
});

这段代码会等待查看器初始化完成后，自动加载指定的glTF模型文件。其中waitForViewerApp函数会不断检查查看器是否就绪，直到可以安全地调用加载方法。

2. 模型文件的部署方式

有三种主要的模型文件部署方式：

1. 本地文件链接：在项目public目录下创建软链接指向模型文件

   ln -s /path/to/model.gltf /project/public/model.gltf
   

2. 远程URL：使用完整的HTTP URL指向模型文件

   const modelPath = "http://example.com/models/model.gltf";
   

3. Apache服务器部署：配置Apache允许跨域访问

   <IfModule mod_headers.c>
       Header set Access-Control-Allow-Origin "*"
       Header set Access-Control-Allow-Methods "GET, OPTIONS"
       Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
   </IfModule>
   

3. Vite配置调整

为了使开发服务器能够正确运行并允许外部访问，需要修改vite.config.js：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3001,
    allowedHosts: ['hostname', 'localhost', '192.168.x.x'],
    cors: {
      origin: '*',
      methods: ['GET', 'POST', 'OPTIONS'],
      allowedHeaders: ['Content-Type', 'Authorization']
    }
  }
});

4. 项目构建与部署

1. 修改package.json中的启动脚本：

   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 3001"
   }
   

2. 构建生产版本：

   npm run build
   

3. 部署dist目录到Web服务器（如Apache）

技术要点解析

1. 异步加载处理：由于查看器初始化是异步过程，需要使用轮询机制等待其就绪。

2. 跨域资源共享(CORS)：当从不同域加载模型时，必须正确配置CORS头。

3. 开发服务器配置：Vite开发服务器需要明确配置才能允许外部访问和跨域请求。

4. 路径处理：模型文件路径可以是相对路径、绝对路径或完整URL，需要根据部署环境选择合适的方式。

实际应用建议

1. 对于生产环境，建议将模型文件与查看器部署在同一域名下，避免跨域问题。

2. 可以考虑扩展功能，通过URL参数指定要加载的模型，增加灵活性。

3. 对于大型模型，可以实现加载进度指示器，提升用户体验。

4. 在错误处理方面，可以添加模型加载失败时的友好提示和重试机制。

通过以上技术实现，我们可以将three-gltf-viewer转变为一个开箱即用的3D模型展示工具，大大降低了非技术用户的使用门槛，同时保留了原有的强大3D渲染功能。