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写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery获取同级元素的简单代码
Jul 09 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
详解ECMAScript typeof用法
Jul 25 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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开发文件系统实例讲解
2006/10/09 PHP
php模板中出现空行解决方法
2011/03/08 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
javascript写的日历类(基于pj)
2010/12/28 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python基础教程之序列详解
2014/08/29 Python
Python实现大文件排序的方法
2015/07/10 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
django rest framework使用django-filter用法
2020/07/15 Python
总经理司机职责
2014/02/02 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
相亲大会策划方案
2014/06/05 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
公务员个人总结
2015/02/12 职场文书
人身损害赔偿协议书
2016/03/22 职场文书