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 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
js实现动态时钟
Mar 12 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
pycharm new project变成灰色的解决方法
2019/06/27 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
韩国商务邀请函
2014/01/14 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
音乐教学反思
2014/02/02 职场文书
篝火晚会主持词
2014/03/25 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
详解Python函数print用法
2021/06/18 Python
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS