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 autocomplete自动完成插件的的使用方法
Aug 07 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
vue3.0 上手体验
Sep 21 Javascript
原生JS运动实现轮播图
Jan 02 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php session应用实例 登录验证
2009/03/16 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Django rest framework实现分页的示例
2018/05/24 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
高三家长寄语
2014/04/03 职场文书
办理护照工作证明
2014/10/10 职场文书
技术支持岗位职责
2015/02/13 职场文书
学风建设主题班会
2015/08/17 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书