返回介绍

打开预览 Three.js 案例(跨域问题)

发布于 2021-07-10 20:14:15 字数 872 浏览 1471 评论 0 收藏 0

不需要加载外部贴图和模型文件的three.js案例,可以直接使用浏览器打开.html案例文件,通常一个threejs项目案例往往都会加载一些外部模型,因此打开threejs案例要搭建一个本地的静态服务器,否则的话,threejs案例无法正常打开,浏览器控制台会提示跨域问题。

如果你知道怎么搭建本地静态服务器,自己用任何方式搭建都可以。如果不了解的话,建议使用nodejs去快速搭建一个本地静态服务器,对于一个WebGL工程师或前端工程师来说,肯定是要学习Nodejs的。

Nodejs本地静态服务器

使用Nodejs搭建本地静态服务器很简单,首先是你要先百度Nodejs安装的相关文章,先在你的电脑上安装配置好Nodejs,熟悉下NPM的使用,然后使用npm执行npm install -g live-server安装live-server模块,如果你想通过安装好的live-server模块开启一个静态服务器,打开命令行,进入threejs案例所在的文件目录,然后执行live-server命令就可以。

通过浏览器访问http://localhost:8080http://127.0.0.1:8080地址,找到threejs案例的.html文件直接打开就可以看到三维场景渲染效果。

开发调试-热更新

在学习threejs的过程中,往往需要频繁的代码测试,查看threejs代码的渲染效果。这时候你肯定希望代码修改之后,threejs渲染效果立即热更新。

如果通过live-server模块搭建的本地静态服务器,你可以实现代码的热加载。也就是说你修改一段代码,然后保存.html代码文件,.html对应的threejs案例就会重新渲染。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文