当前位置: 首页 > news >正文

如何在本地运行threejs官方示例

最近要折腾折腾 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 是无法引入的,因为浏览器不知道引入裸路径。


在这里插入图片描述


在这里插入图片描述


http://www.mrgr.cn/news/56872.html

相关文章:

  • log4j2.xml
  • 将本地文件上传到GIT上
  • Uncaught (in promise) TypeError: Cannot convert object to primitive value
  • ifftshift函数
  • linux—基础命令及相关知识
  • C# Linq常用方法
  • 模组典型上网业务的AT上网流程,明明白白告诉你!
  • 26备战秋招day11——基于CoNLL-2003的bert序列标注
  • pikachu靶场File Inclusion-local测试报告
  • Python爬取京东商品信息,详细讲解,手把手教学(附源码)
  • visio图片三维旋转后导出,格式错乱怎么解决?
  • 解锁团队高效秘诀:5款顶尖PHP任务管理工具推荐
  • 视频转换为8K60帧率
  • opencv - py_photo - py_non_local_means 非局部均值去噪
  • YOLO11改进-模块-引入分层互补注意力混合器HRAMi
  • AI大模型会对我们的生活带来什么改变?普通人终于有机会感觉到大模型的用处了
  • 网址工具(完善中)
  • ssh scp提示Bad configuration option: GSSAPIKexAlgorithms
  • Nodejs上传阿里云oss图片案例
  • antv g6
  • Ping32数据保护工具,提供全面的数据安全解决方案
  • mono源码交叉编译 linux arm arm64全过程
  • stm32f103zet6 ili9341(fsmc) freertos 制作数字电子时钟
  • 志华软件 openfile.aspx 任意文件读取漏洞复现
  • 【无人机设计与控制】机器人RRT路径规划或者无人机二维平面航迹规划
  • 【算法】归并排序概念及例题运用