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 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
express框架下使用session的方法
Jul 31 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
党员评议思想汇报
2014/10/08 职场文书
售房协议书范本2014
2014/10/23 职场文书
事业单位考察材料范文
2014/12/25 职场文书
个人事迹材料范文
2014/12/29 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis