您的位置:首页 > 教育 > 培训 > 创新作品及其设计方案_项目建设管理办法_网站怎么制作_深圳网站优化推广

创新作品及其设计方案_项目建设管理办法_网站怎么制作_深圳网站优化推广

2025/2/23 15:10:34 来源:https://blog.csdn.net/puss0/article/details/143180642  浏览:    关键词:创新作品及其设计方案_项目建设管理办法_网站怎么制作_深圳网站优化推广
创新作品及其设计方案_项目建设管理办法_网站怎么制作_深圳网站优化推广

最近要折腾折腾 threejs,从 gihub 上下载了源码,想在本地跑一跑官方示例,方便修改学习看效果。我不是专业前端,也不想去折腾 node,看网上教程和书上都说有个静态文件服务器就能运行了。

这我会啊,刚好我这里有装 python,直接在 threejs 源码根目录运行 python -m http.server ,然后在浏览器输入 localhost:8000,这不就齐活了吗,然鹅。。。

demo根本加载不出来,全是黑的。亲测不行,倍感崩溃。

也许以前确实可以,毕竟我看的书还是2019年出版的。但是现在 threejs 源码中使用了 importexport 等ES6特性,他们无法直接在浏览器运行,需要 webpack 打包。当然新版浏览器也支持这样的语法了,兼容性可以去网上查看,最新的 Edge 和 Google 应该都没问题。

但是还有一个问题,使用 import 语法后,浏览器对文件的 MIME Type 校验更加严格了,被 import 的文件必须是 text/javascript 或者 application/javascript 类型。否则控制台会报类型错误。

python 的 http 服务不认识 js 文件,于是会给一个默认类型 application/octet-stream 。要解决这个问题我们需要去修改一下 python 的源码,在 python 安装目录下找到 Lib\http 目录,打开其中的 server.py 文件,搜索 extensions_map ,在这个字典中加上 '.js': 'application/javascript'
在这里插入图片描述
实际确定 MIME 类型的函数是 guess_type,它会根据文件扩展名去查 extensions_map 来获取 MIME 类型。因为 python 是解释执行的,因此我们也不需要编译,修改完之后保存,然后重新执行 python -m http.server 就可以了。

如果是使用 go 语言编写静态文件服务的话,也需要手动指定 js 文件的 MIME 类型,加上下面这行代码即可:

mime.AddExtensionType(".js", "text/javascript; charset=utf-8")

charset=utf-8 不是必须的,但是如果你的 js 文件中有中文,在浏览器打开查看的时候可能会看到乱码。像 gin 这样的框架,静态文件服务底层也是用的 go 原生库,所以也是加上上面的代码就可以了,如果不是用的 go 原生库封装的静态文件服务,就需要去看看对应的文档了。


另外一个要注意的地方是,如果要自己编写 threejs demo,在引入 threejs 库的时候,可以 import build 目录下的 three.module.js ,但是必须用路径引入,而且 script 标签上要加上 type="module"

<script type="module">import * as THREE from '/build/three.module.js';// 浏览器控制台测试,是否引入成功console.log(THREE.Scene);
</script>

如果写成 build/three.module.js 是无法引入的,因为浏览器不知道引入裸路径。


在这里插入图片描述


在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com