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


Posted in Javascript onNovember 20, 2017

前言

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

1、three.js中文文档学习之创建场景

2、three.js中文文档学习之通过模块导入

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

从外部文件加载内容

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

有两种解决办法:

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

file:///yourFile.html

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

http://localhost/yourFile.html

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

运行本地服务器

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

Node.js 服务器

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

npm install http-server -g

运行:

http-server -p 8000

Python 服务器

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

//Python 2.x
python -m SimpleHTTPServer

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

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

http://localhost:8000/

PHP 服务器

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

php -S localhost:8000

Ruby 服务器

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

ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

Lighttpd

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

通过 homebrew 安装

brew install loghttpd

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

server.document-root = "/var/www/servers/www.example.org/pages/"

server.port = 3000

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

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

开启:

lighttpd -f lighttpd.conf

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

改变本地文件的安全政策

Safari

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

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

chrome

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

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

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

chrome --allow-file-access-from-files

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

Firefox

在地址栏,输入 about:config

找到 security.fileuri.strict_origin_policy 参数

设定为 false

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

总结

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

Javascript 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 #Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 #Javascript
详细分析jsonp的原理和实现方式
Nov 20 #Javascript
three.js中文文档学习之通过模块导入
Nov 20 #Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 #Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 #Javascript
three.js中文文档学习之创建场景
Nov 20 #Javascript
You might like
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php判断linux下程序问题实例
2015/07/09 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python实现多线程端口扫描
2019/08/31 Python
PyQt5实现画布小程序
2020/05/30 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
清明节网上祭英烈活动总结
2014/04/30 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
优秀党员申报材料
2014/12/18 职场文书
倡议书格式及范文
2015/04/29 职场文书
物业保洁员管理制度
2015/08/05 职场文书