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 中有讨论。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 无锁编程 - 大纲
- 无锁编程(一) - Double-checked Locking
- 无锁编程(二) - 原子操作
- 我所理解的Remoting(3):创建CAO Service Factory使接口和实现相互分离
- 无锁编程(三) - 忙等待
- Enterprise Library深入解析与灵活应用(9):个人觉得比较严重的关于CachingCallHandler的Bug
- 无锁编程(四) - CAS与ABA问题
- Linux Kernel CMPXCHG函数分析
- 无锁编程(五) - RCU(Read-Copy-Update)
- 无锁编程(六) - seqlock(顺序锁)
- 无锁编程(七) - 实战
- zookeeper的python客户端安装
- 事件(Event),绝大多数内存泄漏(Memory Leak)的元凶[上篇]
- 震撼:1分钟带你看完IC0的爆炸视频
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JeecgCloud版,部署项目。
- docker(镜像常用命令)
- [- Flutter基础篇 -] 聊聊那些弹框
- 聊一聊Android中的StateListAnimator
- Linux KeyLogger
- [- Flutter 数据&状态篇 -] InheritedWidget
- Android实现图片一边的三角形边框效果
- Android使用SoundPool播放短音效
- 用Jquery做一个进度条
- Android SoundPool实现简短小音效
- [-Flutter趣玩篇-] 出神入化的Align
- Android应用禁止屏幕休眠的3种方法
- Flutter 实现下拉刷新上拉加载的示例代码
- [- C++趣玩篇1 -] 从打印开始说起
- Android实现蓝牙(BlueTooth)设备检测连接