three.js中文文档学习之如何本地运行详解

前端之家收集整理的这篇文章主要介绍了three.js中文文档学习之如何本地运行详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

本文属于系列问题,需要的朋友们开始之前可以参考以下的两篇文章

1、

2、

如果你只是使用程序化的几何体,不需要加载任何材质,网页应该直接从文件系统加载,只需要双击文件管理器中 HTML 文件,应该在你的浏览器能够运行(地址栏长这样子:file:///yourFile.html)

从外部文件加载内容

如果你从外部文件下载模块和材质,由于浏览器的 的安全限制,会引发安全异常而加载失败。

有两种解决办法:

在浏览器中对于本地文件修改安全性。你才能这样进入网页:

从本地 web 服务器运行文件,你能这样进入网页:

如果你使用第一种,要注意你使用同一个浏览器(修改安全性之后的)进行正常上网时会让自己处于易受攻击状态。你可以创建一个独立的浏览器配置和快捷方式,仅用作本地开发来确保安全。让我们依次看看每种方法。

运行本地服务器

很多编程语言有内置的 HTTP 服务器。他们没有像 或者 的全部功能,但对于测试 three.js 应用已足够。

Node.js 服务器

有一个简单的 HTTP 服务器安装包,安装:

运行:

Python 服务器

如果你安装了 Python,在你的工作目录下运行以下命令行:

//Python 3.x
python -m http.server

会从当前目录转到 localhost 的 80 端口发起服务,地址栏是这样:

PHP 服务器

PHP 也有内置的 web 服务器,php 5.4.0 及以后:

Ruby 服务器

如果你安装了这个,你可以运行如下代码:

8000,:DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

Lighttpd

它是一个非常轻量的通用 web服务器。我们以安装了 HomeBrew 的 OSX 系统为例。不像上述服务器,lighttpd 是一个成熟的服务器产品。

通过 homebrew 安装

在你想运行 web 服务器的地方创建名为 lighttpd.conf 的配置文件。示例:

server.port = 3000

mimetype.assign = (
".html" => "text/html",".txt" => "text/plain",".jpg" => "image/jpeg",".png" => "image/png"
)

在配置文件中,改变 server.document-root 到你需要服务的目录。

开启:

输入 http://localhost:3000/ 就能从你选择的目录提供静态文件的服务。

改变本地文件的安全政策

Safari

使用偏好设置面板开启开发者选项:高级 -> "在菜单栏中显示开发菜单".

然后在 开发 -> 停用本地文件限制。如果你使用 Safari 来编辑和调试的话,值得注意的是 safari 对于缓存总有异常行为,所以在同样的菜单下点击 停用缓存 是个明智的选择。

chrome

首先关闭所有运行的chrome 实例,记住是所有。

在 Windows下,你需要用进程管理器检查是否都关闭了。或者,如果你在系统托盘里看见了 chrome 图标,打开右键菜单点击 退出。应该能关闭所有实例。

然后通过命令行标记启动 chrome 程序:

在 Window 下,最简单的方法就是创建一个特殊的快捷方式图标,在结尾添加如上的标识。(右键 chrome 的快捷方式 -> 属性 -> 目标)

Firefox

在地址栏,输入 about:config

找到 security.fileuri.strict_origin_policy 参数

设定为 false

其他简单都方法也在 中有讨论。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/js/35133.html

猜你在找的JavaScript相关文章