Requirements - 准备工作
官方提供的一个超酷的Demo
Things that Three.js makes easy
- geometries 三维图形的创建
- Aniamating and moving 三维场景内的图形动画和变换
- textures and materials 纹理和材质
- light sources 光源
- 3D-modeling 3D模型
- postprocessing effects 后期渲染效果
- custom shaders 自定义着色器
- point clouds 点云
two types of 3D-based renderer
- WebGL-based renderer
- 由Three.js提供
- CSS 3D-based renderer
- 用于创建基于CSS的3D场景
- 优势：
- 大部分的PC和移动设备浏览器都支持
- 支持在3D空间中直接渲染 HTML元素
Requirements to use Three.js
Getting the source code
Setting up a local web server
Unix/Linux/Mac systems
一般都有Python环境，因此可以直接开启本地服务器：
1 | python -m SimpleHTTPServer |
Node.js
有Node环境可以直接用npm安装http-server/simple-http-server包：
1 | npm install -g http-server |
1 | npm install -g simple-http-server |
Mongoose
没有Python和Node环境的可以用Mongoose，
将系统对应版本的Mongoose可执行文件放到指定目录下运行。
Security exceptions
启动Chrome时在命令后面加上后缀：–disable-web-security
- Windows
chrome.exe –disable-web-security
- Linux
google-chrome –disable-web-security
- Mac
open -a Google\ Chrome –args –disable-web-security
在导航栏输入url：about:config进入配置项
搜索 security.fileuri.strict-origin_policy 变量改成false
Mixed content
一般的网页使用的都是https协议，
但是在项目之中调用的第三方接口时使用的可能是http协议，
版本比较新的Chrome和FireFox浏览器会自动将http协议升级为https协议，
这是为了避免安全警告，
但如果第三方不支持https协议，就会报Mixed content错误。
- 点击url栏左侧铁锁按钮（查看网站信息）
- 点击网站设置
- 将不安全内容的权限修改为允许