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 EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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 获取全局变量的代码
2011/04/21 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python类定义的讲解
2013/11/01 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python协程之动态添加任务的方法
2019/02/19 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
乡镇办公室工作决心书
2014/03/11 职场文书
小学英语教学随笔
2015/08/14 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android