一、前言

Three.js () 是一个纯 JavaScript 实现的 3D 渲染库，其在前端 3D 渲染的地位不言而喻，看其在 github 上的 start 4.6 k，fork 1.7 k 这个量级便知道了。准确来说 ThreeJs 是一个基于 WebGL 的封装，而 WebGL 就是前端界的 OpenGL。

二、Github 首页解读

1.简介

该项目的目的是创建一个易于使用，轻量级的3D库。该库提供Canvas 2D，SVG，CSS3D和WebGL渲染器。 真的是史上见过最全的例程，良心良心啊，不过没有文档说明，也没有注释。捂脸.jpg 文档也是非常的齐全了，同样是良心作品。 其他链接有兴趣的可以自己去探求一下。

2.使用

首先在自己的页面中安装或者以模块的方式进行导入，再或者自己可以进行源码编译并导入。

复制代码

下面是github首页给的一个小例子，有兴趣的可以拿来运行一下，改改里面的参数，感受一下 3D 的世界。

var camera, scene, renderer;var geometry, material, mesh;init();animate();function init() {        // 创建一个相机	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );	camera.position.z = 1;       // 创建场景	scene = new THREE.Scene();       // 创建一个3D Box 几何体	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );	material = new THREE.MeshNormalMaterial();        // 创建 mesh 并添加到场景中	mesh = new THREE.Mesh( geometry, material );	scene.add( mesh );        // 创建一个 WebGLRenderer 并加入到上下文中	renderer = new THREE.WebGLRenderer( { antialias: true } );	renderer.setSize( window.innerWidth, window.innerHeight );	document.body.appendChild( renderer.domElement );}function animate() {	requestAnimationFrame( animate );	mesh.rotation.x += 0.01;	mesh.rotation.y += 0.02;	renderer.render( scene, camera );}复制代码

不想自己敲代码的，也可以看看 github 中提供的 中绘制出来的效果。

除了 GitHub 首页，其还提供了一个官网 ，官网提供了 document 入口，源码下载地址或者直接下载，同时也有许多非常炫丽的产品展示。尤其亮瞎我钛金眼的法拉第FF，真是吃了好大一个鲸 ——

三、源码基本结构

1.本地调试源码

(1) npm install 安装依赖

(2) npm run dev 在本地起一个服务

成功后，如下会在本机开启一个 8080 端口，然后你就可以愉快的在本机体验所有的 demo 效果了。

控制台输出

[HTTP] Starting up http-server, serving ./[HTTP] Available on:[HTTP]   http://127.0.0.1:8080[HTTP]   http://192.168.31.175:8080[HTTP] Hit CTRL-C to stop the server复制代码

2.基本结构

浏览器输出上面的 http 地址，如 ，注意必须要用 http/https 协议，否则例程里面的模型是不能下载的，即，不支持 ftp。

然后再来看一下 src 里面都有哪一些模块