网页载入后报错404找不到3d模型文件

问题背景

        开发了一个使用了three.js的web页面，其中的3d模型文件格式为.gltf，使用vscode的liveserver调试一切正常，但部署到win server后，通过浏览器访问却提示404找不到3d模型文件，明明文件都在目录下，服务器却未能传送到客户浏览器。

        本文推荐一种同类型问题的解决思路供参考。

环境

前端语言：html、css、js（包含three.js包）

开发工具：vscode（包含Live Server）

服务器：win server 2019（IIS管理工具）

关键词

.gltf

一种3d模型文件，因为非常适合直接给显卡使用而为大多数3d引擎的推荐使用格式。

MIME

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

在html文件中，在通过<link>下的type可指定类型。

IANA MIME 类型http://www.iana.org/assignments/media-types/

排查路线

        按照基础的操作步骤在winserver上部署好网站后，通过外部浏览器访问，主页面都加载出来了，但模型却未正常加载出来，浏览器调试控制台显示：404服务器上未找到模型文件。

        浏览器调试工具检查“源代码”下，发现目录中无模型文件的路径，包括独立存放模型文件的文件夹。而在同父文件夹下的其它文件夹却可以找到。

        由此想到该模型文件未被服务器识别和传输。刚开始在服务器上找设置，结果发现大部分都没有什么修改价值，但有几个选项不知道什么意思。

 

        度娘过程中没有相关问题，倒是碰到一个有视频加载不出来的可能。想到html中的<link>标签，在查找了html教程后，想着把模型文件添加到链接中，又碰到type类型选择，继续浏览发现MIME类型选择。

菜鸟教程-html <link> type 属性

       

解决了

        在MIME类型库下找到对应的gltf-binary类型后，在head下添加链接，测试，然而并不行。

        回想到IIS管理器下有个MIME类型选项，打开后发现没有gltf类型，添加，重启网页，测试。