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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 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
yii框架源码分析之创建controller代码
2011/06/28 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
Java基础类库面试题
2013/09/04 面试题
留学自荐信
2013/10/10 职场文书
护士专业推荐信
2013/11/02 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
新学期教师寄语
2014/04/02 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
盗窃案辩护词
2015/05/21 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
js 实现验证码输入框示例详解
2022/09/23 Javascript