three.js下载与开发指南

three.js下载与开发指南
yicheng
发布于

three.js - 一个javascript 3D代码库

这个项目的目的是用最简单的开发模式创建一个轻量级的3 d代码库,这个js库提供了canvas,svg,css3d和webgl这四种渲染方式。


下载地址:

    下载地址:https://github.com/mrdoob/three.js/archive/master.zip

    或者打开threejs.org点击下图箭头所示链接进行下载。

three.js下载与开发指南


下载得到一个这样的压缩包:

three.js下载与开发指南

我们解压它:

three.js下载与开发指南

目录结构:

    .github目录:没什么用。

    Build目录:这个目录里边有两个文件,three.js 和three.min.js 。一个是没有压缩的three.js,一个已经压缩的。这两个js左右引用一个就OK。

    Docs目录:这里是three.js的帮助文档,我们可以双击目录里的Index.html打开这个帮助文档,里边介绍了three.js的各个API,不过解释的不是特别详细。

    Editor目录:这是一个网页版的3D编辑程序,你可以用它来构建three.js的场景。你可以直接通过访问http://threejs.org/editor/来查看效果,同样也可以通过index.html来打开它。

    Examples目录:这个目录里边有很多的示例代码,你可以直接通过访问http://threejs.org/examples/来查看它。

    Src目录:这个是three.js的源代码的目录,里面是所有源代码。

    Test目录:一些测试代码,基本没用。

    Utils目录:存放了一些three.js开发过程中一些需要用到的工具。例如将3D-Max格式的模型转换为three.js特有的json模型。还有用得最常见的convert_obj_three.py,这个可以将obj格式的模型,转换成three.js的js格式的模型。

    .gitignore文件,license文件等:对我们来说没有用。

    bower.json是包管理工具bower用的文件。

    readme.md文件:这个是github项目中必备的文件,用来介绍three.js,markdown格式。


我们把它拷贝到我们本地的服务器的www目录下,用一个wampserver,xampp等等你都可以建立一个本地的服务器环境,这样避免在访问网页的时候用的是file:///协议。file:///协议会使three.js加载模型时会发生类似下面的异常:

    XMLHttpRequest cannot load file:///E:/sortware%20lib/three.js-master/examples/models/collada/monster/monster.dae. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.load @ ColladaLoader.js:125

    ColladaLoader.js:86 ColladaLoader: Empty or non-existing file (./models/collada/monster/monster.dae)request.onreadystatechange @ ColladaLoader.js:86

    ColladaLoader.js:125 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///E:/sortware%20lib/three.js-master/examples/models/collada/monster/monster.dae'.

three.js下载与开发指南

上面这个异常,直接双击打开examples目录下的webgl_loader_collada.html时产生的。

如果访问这个例子代码的时候用本地服务器的方式就会正常three.js下载与开发指南


学习的时候,可以拷贝官网的例子进行修改来学习,这样可以很快速的学习到three.js的干货,同时避免了很多的弯路。新手写three.js代码的时候常会遇到很多的错误,而且不知道怎么去解,这样的学习是很危险的,会消磨人的学习意志。所以我建议学习的时候直接拷贝官网的源码,然后一行行代码的调整,去学习各个函数和接口的作用。因为我也是这么走过来的0.0

本文地址:茜文博客 >>three.js下载与开发指南

转载请注明出处!!!3Q~~~