├── README.md
├── areaLight.html
├── basicTexture.html
├── card.html
├── dynamic.html
├── images
    ├── basicTexture.gif
    ├── bathroom-normal.jpg
    ├── bathroom.jpg
    ├── brick-wall.jpg
    ├── darker_wood.jpg
    ├── dmngp.gif
    ├── dynamic.gif
    ├── floor-wood.jpg
    ├── lineMaterial.gif
    ├── meshMaterial.gif
    ├── metal-floor-normal.jpg
    ├── metal-floor.jpg
    ├── metal-rust.jpg
    ├── negx.jpg
    ├── negy.jpg
    ├── negz.jpg
    ├── normalMap.gif
    ├── plaster-diffuse.jpg
    ├── plaster-normal.jpg
    ├── plaster.jpg
    ├── pointCloud.gif
    ├── posx.jpg
    ├── posy.jpg
    ├── posz.jpg
    ├── raindrop.png
    ├── rainyScene.gif
    ├── snowflake1.png
    ├── snowflake2.png
    ├── snowflake3.png
    ├── snowflake4.png
    ├── snowflake5.png
    ├── snowyScene.gif
    ├── stone-bump.jpg
    ├── stone.jpg
    ├── textGeometry.jpg
    ├── weave-bump.jpg
    ├── weave.jpg
    └── wood-2.jpg
├── libs
    ├── CanvasRenderer.js
    ├── CopyShader.js
    ├── EffectComposer.js
    ├── FXAAShader.js
    ├── MaskPass.js
    ├── OrbitControls.js
    ├── Projector.js
    ├── RenderPass.js
    ├── ShaderDeferred.js
    ├── ShaderPass.js
    ├── WebGLDeferredRenderer.js
    ├── ammo.js
    ├── chroma.js
    ├── dat.gui.js
    ├── fonts
    │   ├── bitstream_vera_sans_mono_roman.typeface.js
    │   ├── helvetiker_bold.typeface.js
    │   └── helvetiker_regular.typeface.js
    ├── physi.js
    ├── physijs_worker.js
    ├── stats.js
    └── three.js
├── lineMaterial.html
├── meshMaterial.html
├── normalMap.html
├── pointCloud.html
├── rainyScene.html
├── snowyScene.html
└── textGeometry.html


/README.md:
--------------------------------------------------------------------------------
  1 | # ThreejsLab
  2 | 
  3 | 记录自己学习的一个过程。
  4 | 
  5 | 所有项目均使用了2个开发环境用的测试辅助库：
  6 | *  stats.js性能监视器来监视3d性能，详见各个demo左上角（它的介绍在 <https://github.com/mrdoob/stats.js> ）
  7 | *  GUI库( dat.gui.js )，详见各个demo右上角，用户可进行控制操作（ <https://github.com/dataarts/dat.gui> ）
  8 | 
  9 | ## Demo：
 10 | (所有demo页右上角有`GUI渲染控制器`，可通过调节它来控制页面的3d效果变化)
 11 | 
 12 | 
 13 | 1、[平面光3d光源](http://imzouyang.com/project/threejs/areaLight.html)（该页面右上角各GUI参数可控制3d变化）
 14 | * 该光源：属于复杂光源、使用它可以定义一个发光的矩形、此光源不再Three.js标准库中，而在它的扩展库中，它不能再使用渲染器WebGLRenderer对象了，而是使用渲染器WebGLDeferredRenderer，俗称延迟渲染器(使用此渲染器还需引入其他js，详见demo，才能使用延迟渲染器)，该渲染器专门处理复杂光源。
 15 | <br /><br />
 16 | 
 17 | 2、[几何体及网格](http://imzouyang.com/project/threejs/meshMaterial.html)
 18 | * 注释：Mesh几何体为groundGeom；通过MeshNormalMaterial作为几何体材质展示旋转色变（MeshNormalMaterial ：通过计算法向颜色来决定每个面颜色的材质）。<br />
 19 | ![几何体及网格示意图](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/meshMaterial.gif)
 20 | <br /><br />
 21 | 
 22 | 3、[gosper曲线](http://imzouyang.com/project/threejs/lineMaterial.html)
 23 | * gosper()，该函数返回的是一个gosper曲线。wiki有相关介绍：（ <https://en.wikipedia.org/wiki/Gosper_curve> ）<br />
 24 | ![osper曲线示意图](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/lineMaterial.gif)
 25 | <br /><br />
 26 | 
 27 | 4、[创建三维文本](http://imzouyang.com/project/threejs/textGeometry.html)
 28 | * 实例化new THREE.TextGeometry(),并操作相关属性即可<br />
 29 | ![创建三维文本示意图](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/textGeometry.jpg)
 30 | <br /><br />
 31 | 
 32 | 5、[创建粒子材质](http://imzouyang.com/project/threejs/pointCloud.html)
 33 | * 实例化new THREE.ParticleBasicMaterial(),创建粒子材质，该材质有9个可控属性<br />
 34 | ![创建粒子材质示意图](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/pointCloud.gif)
 35 | <br /><br />
 36 | 
 37 | 6、[创建下雨3d动画](http://imzouyang.com/project/threejs/rainyScene.html)
 38 | * 使用ParticleBasicMaterial的map属性来加载外部图片；并使用 THREE.AdditiveBlending融合模式，此模式会在画新像素时，背景像素的颜色会被添加到新像素上<br />
 39 | ![创建下雨3d动画](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/rainyScene.gif)
 40 | <br /><br />
 41 | 
 42 | 7、[创建下雪3d动画](http://imzouyang.com/project/threejs/snowyScene.html)<br />
 43 | ![创建下雨3d动画](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/snowyScene.gif)
 44 | <br /><br />
 45 | 
 46 | 8、[基础材质应用](http://imzouyang.com/project/threejs/basicTexture.html)
 47 | * 使用THREE.ImageUtils.loadTexture 来加载一个外部图片
 48 | * threejs内有2种材质对光源产生反应：MeshLamberMaterial  和  MeshPhongMaterial，MeshPhongMaterial一般用于创建光亮表面<br />
 49 | ![基础材质应用](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/basicTexture.gif)
 50 | <br /><br />
 51 | 
 52 | 9、[基础材质应用2](http://imzouyang.com/project/threejs/normalMap.html)
 53 | * 使用THREE.UniformsUtils的clone方法
 54 | * 创建立方体BoxGeometry<br />
 55 | ![基础材质应用2](https://github.com/zouyang1230/ThreejsDemos/raw/master/images/normalMap.gif)
 56 | <br /><br />
 57 | 
 58 | 10、[构建真实动态3d场景](http://imzouyang.com/project/threejs/dynamic.html)<br />
 59 | * 拖动(滚动)鼠标可360度查看全景，整个场景是由6张jpg图片够成。
 60 | ![构建真实动态3d场景](c)
 61 | <br /><br />
 62 | 
 63 | 
 64 | # 以下是一些记录：
 65 | 1、Three.js本质上是Webgl，如果你的浏览器不支持Webgl，那么肯定你就不能完整的运行Three.js。支持Webgl的浏览器很多，例如Chrome、FireFox、360安 全浏览器6.0等，而IE浏览器对Webgl标准的支持就不太好。<br />
 66 | 
 67 | 2、在Three.js中，要渲染物体到网页中，我们需要3个组件：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
 68 | ```javascript
 69 | var scene = new THREE.Scene();	// 场景
 70 | 
 71 | var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
 72 | 
 73 | var renderer = new THREE.WebGLRenderer();	// 渲染器
 74 | 
 75 | renderer.setSize(window.innerWidth, window.innerHeight);	// 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
 76 | document.body.appendChild(renderer.domElement);
 77 | ```
 78 | 
 79 | 3、场景与相机
 80 | * 1）场景只有一种，用THREE.Scene来表示，通过new THREE.Scene();
 81 | * 2）相机有2种，决定了场景中那个角度的景色会显示出来。
 82 | * 透视投影相机：THREE.PerspectiveCamera
 83 | * 正投影相机：THREE.OrthographicCamera ( left, right, top, bottom, near, far )  里面的参数分别代表各个面与相机镜头中心点的垂直距离。
 84 | 
 85 | 4、Threejs使用的是右手坐标系，这源于opengl默认情况下，也是右手坐标系。
 86 | 
 87 | 5、和three.js紧密结合的动画引擎是Tween.js,可以在这里下载 https://github.com/sole
 88 | ```
 89 | 1）引入js<br />
 90 | 2）构建对象：<br />
 91 | function initTween()
 92 | {
 93 |     new TWEEN.Tween( mesh.position)
 94 |             .to( { x: -400 }, 3000 ).repeat( Infinity ).start();
 95 | }
 96 | TWEEN.Tween的构造函数接受的是要改变属性的对象，这里传入的是mesh的位置。
 97 | Tween的任何一个函数返回的都是自身，所以可以用串联的方式直接调用各个函数。
 98 | to函数，接受两个参数：
 99 | 第一个参数是一个集合，里面存放的键值对，键x表示mesh.position的x属性，值-400表示，动画结束的时候需要移动到的位置。
100 | 第二个参数，是完成动画需要的时间，这里是3000ms。
101 | repeat( Infinity )表示重复无穷次，也可以接受一个整形数值，例如5次。
102 | Start表示开始动画，默认情况下是匀速的将mesh.position.x移动到-400的位置。
103 | 3)渲染函数中执行：TWEEN.update();
104 | ```
105 | 
106 | 6、Threejs中的各种光源：
107 | * 光源基类 THREE.Light ( hex )
108 | ```
109 | 参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：
110 | var redLight = new THREE.Light(0xFF0000);
111 | ```
112 | * 由基类派生出来的其他种类光源
113 | 
114 | 7、环境光<br />
115 | 是经过多次反射而来的光称为环境光，无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。因此，当你仅为场景指定环境光时，所有的物体无论法向量如何，都将表现为同样的明暗程度。 （这是因为，反射光可以从各个方向进入您的眼睛）
116 | 构造函数 : THREE.AmbientLight( hex )
117 | var light = new THREE.AmbientLight( 0xff0000 );
118 | scene.add( light );
119 | 
120 | 8、聚光灯<br />
121 | 构造：THREE.SpotLight( hex, intensity, distance, angle, exponent )	
122 | 这种光源的光线从一个锥体中射出，在被照射的物体上产生聚光的效果。
123 | 使用这种光源需要指定光的射出方向以及锥体的顶角α。
124 | 
125 | 
126 | 9、方向光（平行光）  
127 | * 它是一组没有衰减的平行的光线，类似太阳光的效果。
128 | * THREE.DirectionalLight = function ( hex, intensity )
129 | 
130 | 10、点光源	
131 | * 点光源的特点是发光部分为一个小圆面，近似一个点
132 | * 是理想化为质点的向四面八方发出光线的光源。点光源是抽象化了的物理概念，为了把物理问题的研究简单化。就像平时说的光滑平面，质点，无空气阻力一样，点光源在现实中也是不存在的，指的是从一个点向周围空间均匀发光的光源。
133 | * 点光源不会产生投影，原因是光源是朝所有方向发出，计算阴影对GPU来说，负担太重。
134 | 
135 | ### 省略一大坨
136 | ```
137 |  更多详细笔记，如有需要的童鞋可以私信我邮箱
138 | ```
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 


--------------------------------------------------------------------------------
/areaLight.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>Area Light</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 |     <script type="text/javascript" src="./libs/stats.js"></script>
  9 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 10 |     <script type="text/javascript" src="./libs/WebGLDeferredRenderer.js"></script>
 11 |     <script type="text/javascript" src="./libs/ShaderDeferred.js"></script>
 12 |     <script type="text/javascript" src="./libs/RenderPass.js"></script>
 13 |     <script type="text/javascript" src="./libs/EffectComposer.js"></script>
 14 |     <script type="text/javascript" src="./libs/CopyShader.js"></script>
 15 |     <script type="text/javascript" src="./libs/ShaderPass.js"></script>
 16 |     <script type="text/javascript" src="./libs/FXAAShader.js"></script>
 17 |     <script type="text/javascript" src="./libs/MaskPass.js"></script>
 18 | 
 19 |     <style>
 20 |         body {
 21 |             margin: 0;
 22 |             overflow: hidden;
 23 |         }
 24 |     </style>
 25 | </head>
 26 | <body>
 27 | 
 28 | <div id="Stats-output">
 29 | </div>
 30 | <div id="WebGL-output">
 31 | </div>
 32 | 
 33 | <script type="text/javascript">
 34 | 
 35 |     var camera;
 36 | 
 37 |     function init() {
 38 | 
 39 |         var stats = initStats();
 40 | 
 41 |         var scene = new THREE.Scene();
 42 | 
 43 |         camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 44 |         scene.add(camera);
 45 | 
 46 | 
 47 |         var renderer = new THREE.WebGLDeferredRenderer({
 48 |             width: window.innerWidth,
 49 |             height: window.innerHeight,
 50 |             scale: 1, antialias: true,
 51 |             tonemapping: THREE.FilmicOperator, brightness: 2.5
 52 |         });
 53 | 
 54 | 
 55 |         // 创建 ground plane
 56 |         var planeGeometry = new THREE.PlaneGeometry(70, 70, 1, 1);
 57 |         var planeMaterial = new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0xffffff, shininess: 200});
 58 |         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 59 |         // plane.receiveShadow  = true;
 60 | 
 61 |         plane.rotation.x = -0.5 * Math.PI;
 62 |         plane.position.x = 0;
 63 |         plane.position.y = 0;
 64 |         plane.position.z = 0;
 65 | 
 66 |         // 添加到场景
 67 |         scene.add(plane);
 68 | 
 69 |         camera.position.x = 20;
 70 |         camera.position.y = 30;
 71 |         camera.position.z = 21;
 72 |         camera.lookAt(new THREE.Vector3(0, 0, -30));
 73 | 
 74 |         // 添加渲染到html
 75 |         document.getElementById("WebGL-output").appendChild(renderer.domElement);
 76 | 
 77 |         var step = 0;
 78 | 
 79 | 
 80 |         var spotLight0 = new THREE.SpotLight(0xcccccc);
 81 |         spotLight0.position.set(-40, 60, -10);
 82 |         spotLight0.intensity = 0.1;
 83 |         spotLight0.lookAt(plane);
 84 |         scene.add(spotLight0);
 85 | 
 86 | 
 87 |         var areaLight1 = new THREE.AreaLight(0xff0000, 3);
 88 |         areaLight1.position.set(-10, 10, -35);
 89 |         areaLight1.rotation.set(-Math.PI / 2, 0, 0);
 90 |         areaLight1.width = 4;
 91 |         areaLight1.height = 9.9;
 92 |         scene.add(areaLight1);
 93 | 
 94 |         var areaLight2 = new THREE.AreaLight(0x00ff00, 3);
 95 |         areaLight2.position.set(0, 10, -35);
 96 |         areaLight2.rotation.set(-Math.PI / 2, 0, 0);
 97 |         areaLight2.width = 4;
 98 |         areaLight2.height = 9.9;
 99 |         scene.add(areaLight2);
100 | 
101 |         var areaLight3 = new THREE.AreaLight(0x0000ff, 3);
102 |         areaLight3.position.set(10, 10, -35);
103 |         areaLight3.rotation.set(-Math.PI / 2, 0, 0);
104 |         areaLight3.width = 4;
105 |         areaLight3.height = 9.9;
106 |         scene.add(areaLight3);
107 | 
108 |         var planeGeometry1 = new THREE.BoxGeometry(4, 10, 0);
109 |         var planeGeometry1Mat = new THREE.MeshBasicMaterial({color: 0xff0000});
110 |         var plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);
111 |         plane1.position.copy(areaLight1.position);
112 |         scene.add(plane1);
113 | 
114 | 
115 |         var planeGeometry2 = new THREE.BoxGeometry(4, 10, 0);
116 |         var planeGeometry2Mat = new THREE.MeshBasicMaterial({color: 0x00ff00});
117 |         var plane2 = new THREE.Mesh(planeGeometry2, planeGeometry2Mat);
118 | 
119 |         plane2.position.copy(areaLight2.position);
120 |         scene.add(plane2);
121 | 
122 |         var planeGeometry3 = new THREE.BoxGeometry(4, 10, 0);
123 |         var planeGeometry3Mat = new THREE.MeshBasicMaterial({color: 0x0000ff});
124 |         var plane3 = new THREE.Mesh(planeGeometry3, planeGeometry3Mat);
125 | 
126 |         plane3.position.copy(areaLight3.position);
127 |         scene.add(plane3);
128 | 
129 | 
130 |         var controls = new function () {
131 |             this.rotationSpeed = 0.02;
132 |             this.color1 = 0xff0000;
133 |             this.intensity1 = 2;
134 |             this.color2 = 0x00ff00;
135 |             this.intensity2 = 2;
136 |             this.color3 = 0x0000ff;
137 |             this.intensity3 = 2;
138 |         };
139 | 
140 |         var gui = new dat.GUI();
141 |         gui.addColor(controls, 'color1').onChange(function (e) {
142 |             areaLight1.color = new THREE.Color(e);
143 |             planeGeometry1Mat.color = new THREE.Color(e);
144 |             scene.remove(plane1);
145 |             plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);
146 |             plane1.position.copy(areaLight1.position);
147 |             scene.add(plane1);
148 | 
149 |         });
150 |         gui.add(controls, 'intensity1', 0, 5).onChange(function (e) {
151 |             areaLight1.intensity = e;
152 |         });
153 |         gui.addColor(controls, 'color2').onChange(function (e) {
154 |             areaLight2.color = new THREE.Color(e);
155 |             planeGeometry2Mat.color = new THREE.Color(e);
156 |             scene.remove(plane2);
157 |             plane2 = new THREE.Mesh(planeGeometry2, planeGeometry2Mat);
158 |             plane2.position.copy(areaLight2.position);
159 |             scene.add(plane2);
160 |         });
161 |         gui.add(controls, 'intensity2', 0, 5).onChange(function (e) {
162 |             areaLight2.intensity = e;
163 |         });
164 |         gui.addColor(controls, 'color3').onChange(function (e) {
165 |             areaLight3.color = new THREE.Color(e);
166 |             planeGeometry3Mat.color = new THREE.Color(e);
167 |             scene.remove(plane3);
168 |             plane3 = new THREE.Mesh(planeGeometry1, planeGeometry3Mat);
169 |             plane3.position.copy(areaLight3.position);
170 |             scene.add(plane3);
171 |         });
172 |         gui.add(controls, 'intensity3', 0, 5).onChange(function (e) {
173 |             areaLight3.intensity = e;
174 |         });
175 | 
176 | 
177 |         render();
178 | 
179 |         function render() {
180 |             stats.update();
181 | 
182 |             requestAnimationFrame(render);
183 |             renderer.render(scene, camera);
184 |         }
185 | 
186 |         function initStats() {
187 | 
188 |             var stats = new Stats();
189 | 
190 |             stats.setMode(0); // 0: fps, 1: ms
191 | 
192 |             stats.domElement.style.position = 'absolute';
193 |             stats.domElement.style.left = '0px';
194 |             stats.domElement.style.top = '0px';
195 | 
196 |             document.getElementById("Stats-output").appendChild(stats.domElement);
197 | 
198 |             return stats;
199 |         }
200 |     }
201 |     window.onload = init;
202 | </script>
203 | </body>
204 | </html>


--------------------------------------------------------------------------------
/basicTexture.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>基础textures</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <style>
 12 |         body {
 13 |             margin: 0;
 14 |             overflow: hidden;
 15 |         }
 16 |     </style>
 17 | </head>
 18 | <body>
 19 | 
 20 | <div id="Stats-output">
 21 | </div>
 22 | <div id="WebGL-output">
 23 | </div>
 24 | 
 25 | <script type="text/javascript">
 26 | 
 27 |     function init() {
 28 | 
 29 |         var stats = initStats();
 30 | 
 31 |         var scene = new THREE.Scene();
 32 | 
 33 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 34 | 
 35 |         var webGLRenderer = new THREE.WebGLRenderer();
 36 |         webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
 37 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 38 |         webGLRenderer.shadowMapEnabled = true;
 39 | 
 40 |         var polyhedron = createMesh(new THREE.IcosahedronGeometry(5, 0), "metal-rust.jpg");
 41 |         polyhedron.position.x = 12;
 42 |         scene.add(polyhedron);
 43 | 
 44 |         var sphere = createMesh(new THREE.SphereGeometry(5, 20, 20), "floor-wood.jpg");
 45 |         scene.add(sphere);
 46 | 
 47 |         var cube = createMesh(new THREE.BoxGeometry(5, 5, 5), "brick-wall.jpg");
 48 |         cube.position.x = -12;
 49 |         scene.add(cube);
 50 |         console.log(cube.geometry.faceVertexUvs);
 51 | 
 52 |         camera.position.x = 00;
 53 |         camera.position.y = 12;
 54 |         camera.position.z = 28;
 55 |         camera.lookAt(new THREE.Vector3(0, 0, 0));
 56 | 
 57 |         var ambiLight = new THREE.AmbientLight(0x141414);
 58 |         scene.add(ambiLight);
 59 | 
 60 |         var light = new THREE.DirectionalLight();
 61 |         light.position.set(0, 30, 20);
 62 |         scene.add(light);
 63 | 
 64 |         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
 65 | 
 66 |         var step = 0;
 67 | 
 68 | 
 69 |         var controls = new function () {
 70 | 
 71 |         };
 72 | 
 73 | 
 74 |         var gui = new dat.GUI();
 75 | 
 76 | 
 77 |         render();
 78 | 
 79 |         function createMesh(geom, imageFile) {
 80 |             var texture = THREE.ImageUtils.loadTexture("./images/" + imageFile);
 81 |             var mat = new THREE.MeshPhongMaterial();
 82 |             mat.map = texture;
 83 | 
 84 |             var mesh = new THREE.Mesh(geom, mat);
 85 |             return mesh;
 86 |         }
 87 | 
 88 |         function render() {
 89 |             stats.update();
 90 | 
 91 |             polyhedron.rotation.y = step += 0.01;
 92 |             polyhedron.rotation.x = step;
 93 |             cube.rotation.y = step;
 94 |             cube.rotation.x = step;
 95 |             sphere.rotation.y = step;
 96 |             sphere.rotation.x = step;
 97 | 
 98 |             requestAnimationFrame(render);
 99 |             webGLRenderer.render(scene, camera);
100 |         }
101 | 
102 |         function initStats() {
103 | 
104 |             var stats = new Stats();
105 |             stats.setMode(0); 
106 | 
107 |             stats.domElement.style.position = 'absolute';
108 |             stats.domElement.style.left = '0px';
109 |             stats.domElement.style.top = '0px';
110 | 
111 |             document.getElementById("Stats-output").appendChild(stats.domElement);
112 | 
113 |             return stats;
114 |         }
115 |     }
116 |     window.onload = init;
117 | </script>
118 | </body>
119 | </html>


--------------------------------------------------------------------------------
/card.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | <style>
  5 |     body {
  6 |         margin: 0;
  7 |         overflow: hidden;
  8 |     }
  9 | </style>
 10 | 
 11 | <head>
 12 |     <title>Physijs</title>
 13 | 
 14 | 
 15 |     <script type="text/javascript" src="libs/three.js"></script>
 16 |     <script type="text/javascript" src="libs/stats.js"></script>
 17 |     <script type="text/javascript" src="libs/physi.js"></script>
 18 |     <script type="text/javascript" src="libs/chroma.js"></script>
 19 |     <script type="text/javascript" src="libs/dat.gui.js"></script>
 20 | 
 21 | 
 22 |     <script type="text/javascript">
 23 | 
 24 |         'use strict';
 25 | 
 26 |         var scale = chroma.scale(['green', 'white']);
 27 | 
 28 |         Physijs.scripts.worker = 'libs/physijs_worker.js';
 29 |         Physijs.scripts.ammo = 'libs/ammo.js';
 30 | 
 31 |         var initScene, render, applyForce, setMousePosition, mouse_position,
 32 |                 ground_material, box_material,
 33 |                 renderer, render_stats, scene, ground, light, camera, box, boxes = [];
 34 | 
 35 |         initScene = function () {
 36 | 
 37 |             renderer = new THREE.WebGLRenderer({antialias: true});
 38 |             renderer.setSize(window.innerWidth, window.innerHeight);
 39 | 
 40 |             renderer.setClearColor(new THREE.Color(0x000000));
 41 |             document.getElementById('viewport').appendChild(renderer.domElement);
 42 | 
 43 |             render_stats = new Stats();
 44 |             render_stats.domElement.style.position = 'absolute';
 45 |             render_stats.domElement.style.top = '1px';
 46 |             render_stats.domElement.style.zIndex = 100;
 47 |             document.getElementById('viewport').appendChild(render_stats.domElement);
 48 | 
 49 |             scene = new Physijs.Scene;
 50 |             scene.setGravity(new THREE.Vector3(0, -50, 0));
 51 | 
 52 |             camera = new THREE.PerspectiveCamera(
 53 |                     35,
 54 |                     window.innerWidth / window.innerHeight,
 55 |                     1,
 56 |                     1000
 57 |             );
 58 |             camera.position.set(50, 30, 50);
 59 |             camera.lookAt(new THREE.Vector3(10, 0, 10));
 60 |             scene.add(camera);
 61 | 
 62 |             // 点光源
 63 |             light = new THREE.SpotLight(0xFFFFFF);
 64 |             light.position.set(20, 100, 50);
 65 | 
 66 | 
 67 |             scene.add(light);
 68 | 
 69 |             createGround();
 70 | 
 71 |             var points = getPoints();
 72 |             var stones = [];
 73 | 
 74 | 
 75 |             requestAnimationFrame(render);
 76 | 
 77 |             var controls = new function () {
 78 |                 this.gravityX = 0;
 79 |                 this.gravityY = -50;
 80 |                 this.gravityZ = 0;
 81 | 
 82 | 
 83 |                 this.resetScene = function () {
 84 | 
 85 |                     scene.setGravity(new THREE.Vector3(controls.gravityX, controls.gravityY, controls.gravityZ));
 86 |                     stones.forEach(function (st) {
 87 |                         scene.remove(st)
 88 |                     });
 89 |                     stones = [];
 90 | 
 91 | 
 92 |                     points.forEach(function (point) {
 93 |                         var stoneGeom = new THREE.BoxGeometry(0.6, 6, 2);
 94 | 
 95 |                         var stone = new Physijs.BoxMesh(stoneGeom, Physijs.createMaterial(new THREE.MeshPhongMaterial(
 96 |                                 {
 97 |                                     color: scale(Math.random()).hex(),
 98 |                                     transparent: true, opacity: 0.8,
 99 |                                 })));
100 |                         console.log(stone.position);
101 |                         stone.position.copy(point);
102 |                         stone.lookAt(scene.position);
103 |                         stone.__dirtyRotation = true;
104 |                         stone.position.y = 3.5;
105 | 
106 |                         scene.add(stone);
107 |                         stones.push(stone);
108 | 
109 |                     });
110 | 
111 |                     // 倒下第一个牌
112 |                     stones[0].rotation.x = 0.2;
113 |                     stones[0].__dirtyRotation = true;
114 | 
115 |                 };
116 |             };
117 | 
118 |             var gui = new dat.GUI();
119 |             gui.add(controls, 'gravityX', -100, 100);
120 |             gui.add(controls, 'gravityY', -100, 100);
121 |             gui.add(controls, 'gravityZ', -100, 100);
122 |             gui.add(controls, 'resetScene');
123 | 
124 |             controls.resetScene();
125 |         };
126 | 
127 |         var stepX;
128 | 
129 |         render = function () {
130 |             requestAnimationFrame(render);
131 |             renderer.render(scene, camera);
132 |             render_stats.update();
133 | 
134 |             scene.simulate(undefined, 1);
135 | 
136 | 
137 |         };
138 | 
139 | 
140 |         function getPoints() {
141 |             var points = [];
142 |             var r = 27;
143 |             var cX = 0;
144 |             var cY = 0;
145 | 
146 |             var circleOffset = 0;
147 |             for (var i = 0; i < 1000; i += 6 + circleOffset) {
148 | 
149 |                 circleOffset = 4.5 * (i / 360);
150 | 
151 |                 var x = (r / 1440) * (1440 - i) * Math.cos(i * (Math.PI / 180)) + cX;
152 |                 var z = (r / 1440) * (1440 - i) * Math.sin(i * (Math.PI / 180)) + cY;
153 |                 var y = 0;
154 | 
155 |                 points.push(new THREE.Vector3(x, y, z));
156 |             }
157 | 
158 |             return points;
159 |         }
160 | 
161 |         function createGround() {
162 |             var ground_material = Physijs.createMaterial(
163 |                     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('images/wood-2.jpg')}),
164 |                     .9, .3);
165 | 
166 |             var ground = new Physijs.BoxMesh(new THREE.BoxGeometry(60, 1, 60), ground_material, 0);
167 | 
168 |             var borderLeft = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 3, 60), ground_material, 0);
169 |             borderLeft.position.x = -31;
170 |             borderLeft.position.y = 2;
171 |             ground.add(borderLeft);
172 | 
173 |             var borderRight = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 3, 60), ground_material, 0);
174 |             borderRight.position.x = 31;
175 |             borderRight.position.y = 2;
176 |             ground.add(borderRight);
177 | 
178 |             var borderBottom = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 3, 2), ground_material, 0);
179 |             borderBottom.position.z = 30;
180 |             borderBottom.position.y = 2;
181 |             ground.add(borderBottom);
182 | 
183 |             var borderTop = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 3, 2), ground_material, 0);
184 |             borderTop.position.z = -30;
185 |             borderTop.position.y = 2;
186 |             ground.add(borderTop);
187 | 
188 |             scene.add(ground);
189 |         }
190 | 
191 | 
192 |         window.onload = initScene;
193 | 
194 |     </script>
195 | </head>
196 | 
197 | <body>
198 | <div id="viewport"></div>
199 | </body>
200 | 
201 | </html>
202 | 


--------------------------------------------------------------------------------
/dynamic.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <title>dynamic</title>
  5 |     <script src="./libs/three.js"></script>
  6 |     <script src="./libs/dat.gui.js"></script>
  7 |     <script src="./libs/OrbitControls.js"></script>
  8 |     <style>
  9 |         body {
 10 |             margin: 0;
 11 |             overflow: hidden;
 12 |         }
 13 |     </style>
 14 | </head>
 15 | <script>
 16 | 
 17 |     // 全局变量
 18 |     var renderer;
 19 |     var scene;
 20 |     var camera, cubeCamera;
 21 | 
 22 |     var control;
 23 |     var orbit;
 24 | 
 25 |     var sphere;
 26 | 
 27 |     function init() {
 28 | 
 29 |         // 场景
 30 |         scene = new THREE.Scene();
 31 | 
 32 |         // 相机
 33 |         camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
 34 | 
 35 |         orbit = new THREE.OrbitControls(camera);
 36 | 
 37 |         // 渲染器
 38 |         renderer = new THREE.WebGLRenderer();
 39 |         renderer.setClearColor(0x000000, 1.0);
 40 |         renderer.setSize(window.innerWidth, window.innerHeight);
 41 | 
 42 |         var textureCube = createCubeMap();
 43 |         textureCube.format = THREE.RGBFormat;
 44 | 
 45 |         var shader = THREE.ShaderLib["cube"];
 46 |         shader.uniforms["tCube"].value = textureCube;
 47 | 
 48 |         var material = new THREE.ShaderMaterial({
 49 | 
 50 |             fragmentShader: shader.fragmentShader,
 51 |             vertexShader: shader.vertexShader,
 52 |             uniforms: shader.uniforms,
 53 |             depthWrite: false,
 54 |             side: THREE.DoubleSide
 55 | 
 56 |         });
 57 | 
 58 |         var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
 59 |         scene.add(skybox);
 60 | 
 61 |         cubeCamera = new THREE.CubeCamera(0.1, 20000, 256);
 62 |         scene.add(cubeCamera);
 63 | 
 64 |         var sphereGeometry = new THREE.SphereGeometry(4, 15, 15);
 65 |         var boxGeometry = new THREE.BoxGeometry(5, 5, 5);
 66 |         var cylinderGeometry = new THREE.CylinderGeometry(2, 4, 10, 20, 20, false);
 67 | 
 68 |         var dynamicEnvMaterial = new THREE.MeshBasicMaterial({envMap: cubeCamera.renderTarget, side: THREE.DoubleSide});
 69 |         var envMaterial = new THREE.MeshBasicMaterial({envMap: textureCube, side: THREE.DoubleSide});
 70 | 
 71 |         sphere = new THREE.Mesh(sphereGeometry, dynamicEnvMaterial);
 72 |         sphere.name = 'sphere';
 73 |         scene.add(sphere);
 74 | 
 75 |         var cylinder = new THREE.Mesh(cylinderGeometry, envMaterial);
 76 |         cylinder.name = 'cylinder';
 77 |         scene.add(cylinder);
 78 |         cylinder.position.set(10, 0, 0);
 79 | 
 80 |         var cube = new THREE.Mesh(boxGeometry, envMaterial);
 81 |         cube.name = 'cube';
 82 |         scene.add(cube);
 83 |         cube.position.set(-10, 0, 0);
 84 | 
 85 |         camera.position.x = 0;
 86 |         camera.position.y = 5;
 87 |         camera.position.z = 33;
 88 |         camera.lookAt(scene.position);
 89 | 
 90 |         document.body.appendChild(renderer.domElement);
 91 | 
 92 |         control = new function () {
 93 |             this.rotationSpeed = 0.005;
 94 |             this.scale = 1;
 95 |         };
 96 |         addControls(control);
 97 | 
 98 |         render();
 99 |     }
100 | 
101 |     function addControls(controlObject) {
102 |         var gui = new dat.GUI();
103 |         gui.add(controlObject, 'rotationSpeed', -0.1, 0.1);
104 | 
105 |     }
106 | 
107 |     function createCubeMap() {
108 | 
109 |         var path = "./images/";
110 |         var format = '.jpg';
111 |         var urls = [
112 |             path + 'posx' + format, path + 'negx' + format,
113 |             path + 'posy' + format, path + 'negy' + format,
114 |             path + 'posz' + format, path + 'negz' + format
115 |         ];
116 | 
117 |         var textureCube = THREE.ImageUtils.loadTextureCube(urls, new THREE.CubeReflectionMapping());
118 |         return textureCube;
119 |     }
120 | 
121 |     function render() {
122 | 
123 |         orbit.update();
124 | 
125 |         sphere.visible = false;
126 |         cubeCamera.updateCubeMap(renderer, scene);
127 |         sphere.visible = true;
128 | 
129 | 
130 |         renderer.render(scene, camera);
131 |         scene.getObjectByName('cube').rotation.x += control.rotationSpeed;
132 |         scene.getObjectByName('cube').rotation.y += control.rotationSpeed;
133 |         scene.getObjectByName('cylinder').rotation.x += control.rotationSpeed;
134 | 
135 | 
136 |         requestAnimationFrame(render);
137 |     }
138 | 
139 |     window.onload = init;
140 | 
141 | </script>
142 | <body>
143 | </body>
144 | </html>


--------------------------------------------------------------------------------
/images/basicTexture.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/basicTexture.gif


--------------------------------------------------------------------------------
/images/bathroom-normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/bathroom-normal.jpg


--------------------------------------------------------------------------------
/images/bathroom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/bathroom.jpg


--------------------------------------------------------------------------------
/images/brick-wall.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/brick-wall.jpg


--------------------------------------------------------------------------------
/images/darker_wood.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/darker_wood.jpg


--------------------------------------------------------------------------------
/images/dmngp.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/dmngp.gif


--------------------------------------------------------------------------------
/images/dynamic.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/dynamic.gif


--------------------------------------------------------------------------------
/images/floor-wood.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/floor-wood.jpg


--------------------------------------------------------------------------------
/images/lineMaterial.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/lineMaterial.gif


--------------------------------------------------------------------------------
/images/meshMaterial.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/meshMaterial.gif


--------------------------------------------------------------------------------
/images/metal-floor-normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/metal-floor-normal.jpg


--------------------------------------------------------------------------------
/images/metal-floor.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/metal-floor.jpg


--------------------------------------------------------------------------------
/images/metal-rust.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/metal-rust.jpg


--------------------------------------------------------------------------------
/images/negx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/negx.jpg


--------------------------------------------------------------------------------
/images/negy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/negy.jpg


--------------------------------------------------------------------------------
/images/negz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/negz.jpg


--------------------------------------------------------------------------------
/images/normalMap.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/normalMap.gif


--------------------------------------------------------------------------------
/images/plaster-diffuse.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/plaster-diffuse.jpg


--------------------------------------------------------------------------------
/images/plaster-normal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/plaster-normal.jpg


--------------------------------------------------------------------------------
/images/plaster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/plaster.jpg


--------------------------------------------------------------------------------
/images/pointCloud.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/pointCloud.gif


--------------------------------------------------------------------------------
/images/posx.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/posx.jpg


--------------------------------------------------------------------------------
/images/posy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/posy.jpg


--------------------------------------------------------------------------------
/images/posz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/posz.jpg


--------------------------------------------------------------------------------
/images/raindrop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/raindrop.png


--------------------------------------------------------------------------------
/images/rainyScene.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/rainyScene.gif


--------------------------------------------------------------------------------
/images/snowflake1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/snowflake1.png


--------------------------------------------------------------------------------
/images/snowflake2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/snowflake2.png


--------------------------------------------------------------------------------
/images/snowflake3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/snowflake3.png


--------------------------------------------------------------------------------
/images/snowflake4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/snowflake4.png


--------------------------------------------------------------------------------
/images/snowflake5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/snowflake5.png


--------------------------------------------------------------------------------
/images/snowyScene.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/snowyScene.gif


--------------------------------------------------------------------------------
/images/stone-bump.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/stone-bump.jpg


--------------------------------------------------------------------------------
/images/stone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/stone.jpg


--------------------------------------------------------------------------------
/images/textGeometry.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/textGeometry.jpg


--------------------------------------------------------------------------------
/images/weave-bump.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/weave-bump.jpg


--------------------------------------------------------------------------------
/images/weave.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/weave.jpg


--------------------------------------------------------------------------------
/images/wood-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zouyang1230/ThreejsLab/b4c9ecf87f2695c201e72d3cc9af7ecf662ec499/images/wood-2.jpg


--------------------------------------------------------------------------------
/libs/CanvasRenderer.js:
--------------------------------------------------------------------------------
   1 | /**
   2 |  * @author mrdoob / http://mrdoob.com/
   3 |  */
   4 | 
   5 | THREE.SpriteCanvasMaterial = function ( parameters ) {
   6 | 
   7 | 	THREE.Material.call( this );
   8 | 
   9 | 	this.type = 'SpriteCanvasMaterial';
  10 | 
  11 | 	this.color = new THREE.Color( 0xffffff );
  12 | 	this.program = function ( context, color ) {};
  13 | 
  14 | 	this.setValues( parameters );
  15 | 
  16 | };
  17 | 
  18 | THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
  19 | 
  20 | THREE.SpriteCanvasMaterial.prototype.clone = function () {
  21 | 
  22 | 	var material = new THREE.SpriteCanvasMaterial();
  23 | 
  24 | 	THREE.Material.prototype.clone.call( this, material );
  25 | 
  26 | 	material.color.copy( this.color );
  27 | 	material.program = this.program;
  28 | 
  29 | 	return material;
  30 | 
  31 | };
  32 | 
  33 | //
  34 | 
  35 | THREE.CanvasRenderer = function ( parameters ) {
  36 | 
  37 | 	console.log( 'THREE.CanvasRenderer', THREE.REVISION );
  38 | 
  39 | 	var smoothstep = THREE.Math.smoothstep;
  40 | 
  41 | 	parameters = parameters || {};
  42 | 
  43 | 	var _this = this,
  44 | 	_renderData, _elements, _lights,
  45 | 	_projector = new THREE.Projector(),
  46 | 
  47 | 	_canvas = parameters.canvas !== undefined
  48 | 			 ? parameters.canvas
  49 | 			 : document.createElement( 'canvas' ),
  50 | 
  51 | 	_canvasWidth = _canvas.width,
  52 | 	_canvasHeight = _canvas.height,
  53 | 	_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
  54 | 	_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
  55 | 
  56 | 	_viewportX = 0,
  57 | 	_viewportY = 0,
  58 | 	_viewportWidth = _canvasWidth,
  59 | 	_viewportHeight = _canvasHeight,
  60 | 
  61 | 	_context = _canvas.getContext( '2d', {
  62 | 		alpha: parameters.alpha === true
  63 | 	} ),
  64 | 
  65 | 	_clearColor = new THREE.Color( 0x000000 ),
  66 | 	_clearAlpha = 0,
  67 | 
  68 | 	_contextGlobalAlpha = 1,
  69 | 	_contextGlobalCompositeOperation = 0,
  70 | 	_contextStrokeStyle = null,
  71 | 	_contextFillStyle = null,
  72 | 	_contextLineWidth = null,
  73 | 	_contextLineCap = null,
  74 | 	_contextLineJoin = null,
  75 | 	_contextLineDash = [],
  76 | 
  77 | 	_camera,
  78 | 
  79 | 	_v1, _v2, _v3, _v4,
  80 | 	_v5 = new THREE.RenderableVertex(),
  81 | 	_v6 = new THREE.RenderableVertex(),
  82 | 
  83 | 	_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
  84 | 	_v4x, _v4y, _v5x, _v5y, _v6x, _v6y,
  85 | 
  86 | 	_color = new THREE.Color(),
  87 | 	_color1 = new THREE.Color(),
  88 | 	_color2 = new THREE.Color(),
  89 | 	_color3 = new THREE.Color(),
  90 | 	_color4 = new THREE.Color(),
  91 | 
  92 | 	_diffuseColor = new THREE.Color(),
  93 | 	_emissiveColor = new THREE.Color(),
  94 | 
  95 | 	_lightColor = new THREE.Color(),
  96 | 
  97 | 	_patterns = {},
  98 | 
  99 | 	_image, _uvs,
 100 | 	_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
 101 | 
 102 | 	_clipBox = new THREE.Box2(),
 103 | 	_clearBox = new THREE.Box2(),
 104 | 	_elemBox = new THREE.Box2(),
 105 | 
 106 | 	_ambientLight = new THREE.Color(),
 107 | 	_directionalLights = new THREE.Color(),
 108 | 	_pointLights = new THREE.Color(),
 109 | 
 110 | 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 111 | 	_centroid = new THREE.Vector3(),
 112 | 	_normal = new THREE.Vector3(),
 113 | 	_normalViewMatrix = new THREE.Matrix3();
 114 | 
 115 | 	// dash+gap fallbacks for Firefox and everything else
 116 | 
 117 | 	if ( _context.setLineDash === undefined ) {
 118 | 
 119 | 		_context.setLineDash = function () {}
 120 | 
 121 | 	}
 122 | 
 123 | 	this.domElement = _canvas;
 124 | 
 125 | 	this.devicePixelRatio = parameters.devicePixelRatio !== undefined
 126 | 				 ? parameters.devicePixelRatio
 127 | 				 : self.devicePixelRatio !== undefined
 128 | 					 ? self.devicePixelRatio
 129 | 					 : 1;
 130 | 
 131 | 	this.autoClear = true;
 132 | 	this.sortObjects = true;
 133 | 	this.sortElements = true;
 134 | 
 135 | 	this.info = {
 136 | 
 137 | 		render: {
 138 | 
 139 | 			vertices: 0,
 140 | 			faces: 0
 141 | 
 142 | 		}
 143 | 
 144 | 	}
 145 | 
 146 | 	// WebGLRenderer compatibility
 147 | 
 148 | 	this.supportsVertexTextures = function () {};
 149 | 	this.setFaceCulling = function () {};
 150 | 
 151 | 	this.setSize = function ( width, height, updateStyle ) {
 152 | 
 153 | 		_canvasWidth = width * this.devicePixelRatio;
 154 | 		_canvasHeight = height * this.devicePixelRatio;
 155 | 
 156 | 		_canvas.width = _canvasWidth;
 157 | 		_canvas.height = _canvasHeight;
 158 | 
 159 | 		_canvasWidthHalf = Math.floor( _canvasWidth / 2 );
 160 | 		_canvasHeightHalf = Math.floor( _canvasHeight / 2 );
 161 | 
 162 | 		if ( updateStyle !== false ) {
 163 | 
 164 | 			_canvas.style.width = width + 'px';
 165 | 			_canvas.style.height = height + 'px';
 166 | 
 167 | 		}
 168 | 
 169 | 		_clipBox.min.set( -_canvasWidthHalf, -_canvasHeightHalf ),
 170 | 		_clipBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 171 | 
 172 | 		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
 173 | 		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 174 | 
 175 | 		_contextGlobalAlpha = 1;
 176 | 		_contextGlobalCompositeOperation = 0;
 177 | 		_contextStrokeStyle = null;
 178 | 		_contextFillStyle = null;
 179 | 		_contextLineWidth = null;
 180 | 		_contextLineCap = null;
 181 | 		_contextLineJoin = null;
 182 | 
 183 | 		this.setViewport( 0, 0, width, height );
 184 | 
 185 | 	};
 186 | 
 187 | 	this.setViewport = function ( x, y, width, height ) {
 188 | 
 189 | 		_viewportX = x * this.devicePixelRatio;
 190 | 		_viewportY = y * this.devicePixelRatio;
 191 | 
 192 | 		_viewportWidth = width * this.devicePixelRatio;
 193 | 		_viewportHeight = height * this.devicePixelRatio;
 194 | 
 195 | 	};
 196 | 
 197 | 	this.setScissor = function () {};
 198 | 	this.enableScissorTest = function () {};
 199 | 
 200 | 	this.setClearColor = function ( color, alpha ) {
 201 | 
 202 | 		_clearColor.set( color );
 203 | 		_clearAlpha = alpha !== undefined ? alpha : 1;
 204 | 
 205 | 		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
 206 | 		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 207 | 
 208 | 	};
 209 | 
 210 | 	this.setClearColorHex = function ( hex, alpha ) {
 211 | 
 212 | 		console.warn( 'THREE.CanvasRenderer: .setClearColorHex() is being removed. Use .setClearColor() instead.' );
 213 | 		this.setClearColor( hex, alpha );
 214 | 
 215 | 	};
 216 | 
 217 | 	this.getClearColor = function () {
 218 | 
 219 | 		return _clearColor;
 220 | 
 221 | 	};
 222 | 
 223 | 	this.getClearAlpha = function () {
 224 | 
 225 | 		return _clearAlpha;
 226 | 
 227 | 	};
 228 | 
 229 | 	this.getMaxAnisotropy = function () {
 230 | 
 231 | 		return 0;
 232 | 
 233 | 	};
 234 | 
 235 | 	this.clear = function () {
 236 | 
 237 | 		if ( _clearBox.empty() === false ) {
 238 | 
 239 | 			_clearBox.intersect( _clipBox );
 240 | 			_clearBox.expandByScalar( 2 );
 241 | 
 242 | 			_clearBox.min.x = _clearBox.min.x + _canvasWidthHalf;
 243 | 			_clearBox.min.y =  - _clearBox.min.y + _canvasHeightHalf;
 244 | 			_clearBox.max.x = _clearBox.max.x + _canvasWidthHalf;
 245 | 			_clearBox.max.y =  - _clearBox.max.y + _canvasHeightHalf;
 246 | 
 247 | 			if ( _clearAlpha < 1 ) {
 248 | 
 249 | 				_context.clearRect(
 250 | 					_clearBox.min.x | 0,
 251 | 					_clearBox.min.y | 0,
 252 | 					( _clearBox.max.x - _clearBox.min.x ) | 0,
 253 | 					( _clearBox.max.y - _clearBox.min.y ) | 0
 254 | 				);
 255 | 
 256 | 			}
 257 | 
 258 | 			if ( _clearAlpha > 0 ) {
 259 | 
 260 | 				setBlending( THREE.NormalBlending );
 261 | 				setOpacity( 1 );
 262 | 
 263 | 				setFillStyle( 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')' );
 264 | 
 265 | 				_context.fillRect(
 266 | 					_clearBox.min.x | 0,
 267 | 					_clearBox.min.y | 0,
 268 | 					( _clearBox.max.x - _clearBox.min.x ) | 0,
 269 | 					( _clearBox.max.y - _clearBox.min.y ) | 0
 270 | 				);
 271 | 
 272 | 			}
 273 | 
 274 | 			_clearBox.makeEmpty();
 275 | 
 276 | 		}
 277 | 
 278 | 	};
 279 | 
 280 | 	// compatibility
 281 | 
 282 | 	this.clearColor = function () {};
 283 | 	this.clearDepth = function () {};
 284 | 	this.clearStencil = function () {};
 285 | 
 286 | 	this.render = function ( scene, camera ) {
 287 | 
 288 | 		if ( camera instanceof THREE.Camera === false ) {
 289 | 
 290 | 			console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
 291 | 			return;
 292 | 
 293 | 		}
 294 | 
 295 | 		if ( this.autoClear === true ) this.clear();
 296 | 
 297 | 		_this.info.render.vertices = 0;
 298 | 		_this.info.render.faces = 0;
 299 | 
 300 | 		_context.setTransform( _viewportWidth / _canvasWidth, 0, 0, - _viewportHeight / _canvasHeight, _viewportX, _canvasHeight - _viewportY );
 301 | 		_context.translate( _canvasWidthHalf, _canvasHeightHalf );
 302 | 
 303 | 		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
 304 | 		_elements = _renderData.elements;
 305 | 		_lights = _renderData.lights;
 306 | 		_camera = camera;
 307 | 
 308 | 		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
 309 | 
 310 | 		/* DEBUG
 311 | 		setFillStyle( 'rgba( 0, 255, 255, 0.5 )' );
 312 | 		_context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );
 313 | 		*/
 314 | 
 315 | 		calculateLights();
 316 | 
 317 | 		for ( var e = 0, el = _elements.length; e < el; e ++ ) {
 318 | 
 319 | 			var element = _elements[ e ];
 320 | 
 321 | 			var material = element.material;
 322 | 
 323 | 			if ( material === undefined || material.opacity === 0 ) continue;
 324 | 
 325 | 			_elemBox.makeEmpty();
 326 | 
 327 | 			if ( element instanceof THREE.RenderableSprite ) {
 328 | 
 329 | 				_v1 = element;
 330 | 				_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
 331 | 
 332 | 				renderSprite( _v1, element, material );
 333 | 
 334 | 			} else if ( element instanceof THREE.RenderableLine ) {
 335 | 
 336 | 				_v1 = element.v1; _v2 = element.v2;
 337 | 
 338 | 				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
 339 | 				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 340 | 
 341 | 				_elemBox.setFromPoints( [
 342 | 					_v1.positionScreen,
 343 | 					_v2.positionScreen
 344 | 				] );
 345 | 
 346 | 				if ( _clipBox.isIntersectionBox( _elemBox ) === true ) {
 347 | 
 348 | 					renderLine( _v1, _v2, element, material );
 349 | 
 350 | 				}
 351 | 
 352 | 			} else if ( element instanceof THREE.RenderableFace ) {
 353 | 
 354 | 				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
 355 | 
 356 | 				if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
 357 | 				if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
 358 | 				if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
 359 | 
 360 | 				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
 361 | 				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 362 | 				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
 363 | 
 364 | 				if ( material.overdraw > 0 ) {
 365 | 
 366 | 					expand( _v1.positionScreen, _v2.positionScreen, material.overdraw );
 367 | 					expand( _v2.positionScreen, _v3.positionScreen, material.overdraw );
 368 | 					expand( _v3.positionScreen, _v1.positionScreen, material.overdraw );
 369 | 
 370 | 				}
 371 | 
 372 | 				_elemBox.setFromPoints( [
 373 | 					_v1.positionScreen,
 374 | 					_v2.positionScreen,
 375 | 					_v3.positionScreen
 376 | 				] );
 377 | 
 378 | 				if ( _clipBox.isIntersectionBox( _elemBox ) === true ) {
 379 | 
 380 | 					renderFace3( _v1, _v2, _v3, 0, 1, 2, element, material );
 381 | 
 382 | 				}
 383 | 
 384 | 			}
 385 | 
 386 | 			/* DEBUG
 387 | 			setLineWidth( 1 );
 388 | 			setStrokeStyle( 'rgba( 0, 255, 0, 0.5 )' );
 389 | 			_context.strokeRect( _elemBox.min.x, _elemBox.min.y, _elemBox.max.x - _elemBox.min.x, _elemBox.max.y - _elemBox.min.y );
 390 | 			*/
 391 | 
 392 | 			_clearBox.union( _elemBox );
 393 | 
 394 | 		}
 395 | 
 396 | 		/* DEBUG
 397 | 		setLineWidth( 1 );
 398 | 		setStrokeStyle( 'rgba( 255, 0, 0, 0.5 )' );
 399 | 		_context.strokeRect( _clearBox.min.x, _clearBox.min.y, _clearBox.max.x - _clearBox.min.x, _clearBox.max.y - _clearBox.min.y );
 400 | 		*/
 401 | 
 402 | 		_context.setTransform( 1, 0, 0, 1, 0, 0 );
 403 | 
 404 | 	};
 405 | 
 406 | 	//
 407 | 
 408 | 	function calculateLights() {
 409 | 
 410 | 		_ambientLight.setRGB( 0, 0, 0 );
 411 | 		_directionalLights.setRGB( 0, 0, 0 );
 412 | 		_pointLights.setRGB( 0, 0, 0 );
 413 | 
 414 | 		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
 415 | 
 416 | 			var light = _lights[ l ];
 417 | 			var lightColor = light.color;
 418 | 
 419 | 			if ( light instanceof THREE.AmbientLight ) {
 420 | 
 421 | 				_ambientLight.add( lightColor );
 422 | 
 423 | 			} else if ( light instanceof THREE.DirectionalLight ) {
 424 | 
 425 | 				// for sprites
 426 | 
 427 | 				_directionalLights.add( lightColor );
 428 | 
 429 | 			} else if ( light instanceof THREE.PointLight ) {
 430 | 
 431 | 				// for sprites
 432 | 
 433 | 				_pointLights.add( lightColor );
 434 | 
 435 | 			}
 436 | 
 437 | 		}
 438 | 
 439 | 	}
 440 | 
 441 | 	function calculateLight( position, normal, color ) {
 442 | 
 443 | 		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
 444 | 
 445 | 			var light = _lights[ l ];
 446 | 
 447 | 			_lightColor.copy( light.color );
 448 | 
 449 | 			if ( light instanceof THREE.DirectionalLight ) {
 450 | 
 451 | 				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
 452 | 
 453 | 				var amount = normal.dot( lightPosition );
 454 | 
 455 | 				if ( amount <= 0 ) continue;
 456 | 
 457 | 				amount *= light.intensity;
 458 | 
 459 | 				color.add( _lightColor.multiplyScalar( amount ) );
 460 | 
 461 | 			} else if ( light instanceof THREE.PointLight ) {
 462 | 
 463 | 				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
 464 | 
 465 | 				var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
 466 | 
 467 | 				if ( amount <= 0 ) continue;
 468 | 
 469 | 				amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
 470 | 
 471 | 				if ( amount == 0 ) continue;
 472 | 
 473 | 				amount *= light.intensity;
 474 | 
 475 | 				color.add( _lightColor.multiplyScalar( amount ) );
 476 | 
 477 | 			}
 478 | 
 479 | 		}
 480 | 
 481 | 	}
 482 | 
 483 | 	function renderSprite( v1, element, material ) {
 484 | 
 485 | 		setOpacity( material.opacity );
 486 | 		setBlending( material.blending );
 487 | 
 488 | 		var scaleX = element.scale.x * _canvasWidthHalf;
 489 | 		var scaleY = element.scale.y * _canvasHeightHalf;
 490 | 
 491 | 		var dist = 0.5 * Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
 492 | 		_elemBox.min.set( v1.x - dist, v1.y - dist );
 493 | 		_elemBox.max.set( v1.x + dist, v1.y + dist );
 494 | 
 495 | 		if ( material instanceof THREE.SpriteMaterial ) {
 496 | 
 497 | 			var texture = material.map;
 498 | 
 499 | 			if ( texture !== null && texture.image !== undefined ) {
 500 | 
 501 | 				if ( texture.hasEventListener( 'update', onTextureUpdate ) === false ) {
 502 | 
 503 | 					if ( texture.image.width > 0 ) {
 504 | 
 505 | 						textureToPattern( texture );
 506 | 
 507 | 					}
 508 | 
 509 | 					texture.addEventListener( 'update', onTextureUpdate );
 510 | 
 511 | 				}
 512 | 
 513 | 				var pattern = _patterns[ texture.id ];
 514 | 
 515 | 				if ( pattern !== undefined ) {
 516 | 
 517 | 					setFillStyle( pattern );
 518 | 
 519 | 				} else {
 520 | 
 521 | 					setFillStyle( 'rgba( 0, 0, 0, 1 )' );
 522 | 
 523 | 				}
 524 | 
 525 | 				//
 526 | 
 527 | 				var bitmap = texture.image;
 528 | 
 529 | 				var ox = bitmap.width * texture.offset.x;
 530 | 				var oy = bitmap.height * texture.offset.y;
 531 | 
 532 | 				var sx = bitmap.width * texture.repeat.x;
 533 | 				var sy = bitmap.height * texture.repeat.y;
 534 | 
 535 | 				var cx = scaleX / sx;
 536 | 				var cy = scaleY / sy;
 537 | 
 538 | 				_context.save();
 539 | 				_context.translate( v1.x, v1.y );
 540 | 				if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 541 | 				_context.translate( - scaleX / 2, - scaleY / 2 );
 542 | 				_context.scale( cx, cy );
 543 | 				_context.translate( - ox, - oy );
 544 | 				_context.fillRect( ox, oy, sx, sy );
 545 | 				_context.restore();
 546 | 
 547 | 			} else {
 548 | 
 549 | 				// no texture
 550 | 
 551 | 				setFillStyle( material.color.getStyle() );
 552 | 
 553 | 				_context.save();
 554 | 				_context.translate( v1.x, v1.y );
 555 | 				if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 556 | 				_context.scale( scaleX, - scaleY );
 557 | 				_context.fillRect( - 0.5, - 0.5, 1, 1 );
 558 | 				_context.restore();
 559 | 
 560 | 			}
 561 | 
 562 | 		} else if ( material instanceof THREE.SpriteCanvasMaterial ) {
 563 | 
 564 | 			setStrokeStyle( material.color.getStyle() );
 565 | 			setFillStyle( material.color.getStyle() );
 566 | 
 567 | 			_context.save();
 568 | 			_context.translate( v1.x, v1.y );
 569 | 			if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 570 | 			_context.scale( scaleX, scaleY );
 571 | 
 572 | 			material.program( _context );
 573 | 
 574 | 			_context.restore();
 575 | 
 576 | 		}
 577 | 
 578 | 		/* DEBUG
 579 | 		setStrokeStyle( 'rgb(255,255,0)' );
 580 | 		_context.beginPath();
 581 | 		_context.moveTo( v1.x - 10, v1.y );
 582 | 		_context.lineTo( v1.x + 10, v1.y );
 583 | 		_context.moveTo( v1.x, v1.y - 10 );
 584 | 		_context.lineTo( v1.x, v1.y + 10 );
 585 | 		_context.stroke();
 586 | 		*/
 587 | 
 588 | 	}
 589 | 
 590 | 	function renderLine( v1, v2, element, material ) {
 591 | 
 592 | 		setOpacity( material.opacity );
 593 | 		setBlending( material.blending );
 594 | 
 595 | 		_context.beginPath();
 596 | 		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
 597 | 		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
 598 | 
 599 | 		if ( material instanceof THREE.LineBasicMaterial ) {
 600 | 
 601 | 			setLineWidth( material.linewidth );
 602 | 			setLineCap( material.linecap );
 603 | 			setLineJoin( material.linejoin );
 604 | 
 605 | 			if ( material.vertexColors !== THREE.VertexColors ) {
 606 | 
 607 | 				setStrokeStyle( material.color.getStyle() );
 608 | 
 609 | 			} else {
 610 | 
 611 | 				var colorStyle1 = element.vertexColors[ 0 ].getStyle();
 612 | 				var colorStyle2 = element.vertexColors[ 1 ].getStyle();
 613 | 
 614 | 				if ( colorStyle1 === colorStyle2 ) {
 615 | 
 616 | 					setStrokeStyle( colorStyle1 );
 617 | 
 618 | 				} else {
 619 | 
 620 | 					try {
 621 | 
 622 | 						var grad = _context.createLinearGradient(
 623 | 							v1.positionScreen.x,
 624 | 							v1.positionScreen.y,
 625 | 							v2.positionScreen.x,
 626 | 							v2.positionScreen.y
 627 | 						);
 628 | 						grad.addColorStop( 0, colorStyle1 );
 629 | 						grad.addColorStop( 1, colorStyle2 );
 630 | 
 631 | 					} catch ( exception ) {
 632 | 
 633 | 						grad = colorStyle1;
 634 | 
 635 | 					}
 636 | 
 637 | 					setStrokeStyle( grad );
 638 | 
 639 | 				}
 640 | 
 641 | 			}
 642 | 
 643 | 			_context.stroke();
 644 | 			_elemBox.expandByScalar( material.linewidth * 2 );
 645 | 
 646 | 		} else if ( material instanceof THREE.LineDashedMaterial ) {
 647 | 
 648 | 			setLineWidth( material.linewidth );
 649 | 			setLineCap( material.linecap );
 650 | 			setLineJoin( material.linejoin );
 651 | 			setStrokeStyle( material.color.getStyle() );
 652 | 			setLineDash( [ material.dashSize, material.gapSize ] );
 653 | 
 654 | 			_context.stroke();
 655 | 
 656 | 			_elemBox.expandByScalar( material.linewidth * 2 );
 657 | 
 658 | 			setLineDash( [] );
 659 | 
 660 | 		}
 661 | 
 662 | 	}
 663 | 
 664 | 	function renderFace3( v1, v2, v3, uv1, uv2, uv3, element, material ) {
 665 | 
 666 | 		_this.info.render.vertices += 3;
 667 | 		_this.info.render.faces ++;
 668 | 
 669 | 		setOpacity( material.opacity );
 670 | 		setBlending( material.blending );
 671 | 
 672 | 		_v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;
 673 | 		_v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
 674 | 		_v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
 675 | 
 676 | 		drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
 677 | 
 678 | 		if ( ( material instanceof THREE.MeshLambertMaterial || material instanceof THREE.MeshPhongMaterial ) && material.map === null ) {
 679 | 
 680 | 			_diffuseColor.copy( material.color );
 681 | 			_emissiveColor.copy( material.emissive );
 682 | 
 683 | 			if ( material.vertexColors === THREE.FaceColors ) {
 684 | 
 685 | 				_diffuseColor.multiply( element.color );
 686 | 
 687 | 			}
 688 | 
 689 | 			_color.copy( _ambientLight );
 690 | 
 691 | 			_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
 692 | 
 693 | 			calculateLight( _centroid, element.normalModel, _color );
 694 | 
 695 | 			_color.multiply( _diffuseColor ).add( _emissiveColor );
 696 | 
 697 | 			material.wireframe === true
 698 | 				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 699 | 				 : fillPath( _color );
 700 | 
 701 | 		} else if ( material instanceof THREE.MeshBasicMaterial ||
 702 | 				    material instanceof THREE.MeshLambertMaterial ||
 703 | 				    material instanceof THREE.MeshPhongMaterial ) {
 704 | 
 705 | 			if ( material.map !== null ) {
 706 | 
 707 | 				if ( material.map.mapping instanceof THREE.UVMapping ) {
 708 | 
 709 | 					_uvs = element.uvs;
 710 | 					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uvs[ uv1 ].x, _uvs[ uv1 ].y, _uvs[ uv2 ].x, _uvs[ uv2 ].y, _uvs[ uv3 ].x, _uvs[ uv3 ].y, material.map );
 711 | 
 712 | 				}
 713 | 
 714 | 			} else if ( material.envMap !== null ) {
 715 | 
 716 | 				if ( material.envMap.mapping instanceof THREE.SphericalReflectionMapping ) {
 717 | 
 718 | 					_normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );
 719 | 					_uv1x = 0.5 * _normal.x + 0.5;
 720 | 					_uv1y = 0.5 * _normal.y + 0.5;
 721 | 
 722 | 					_normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );
 723 | 					_uv2x = 0.5 * _normal.x + 0.5;
 724 | 					_uv2y = 0.5 * _normal.y + 0.5;
 725 | 
 726 | 					_normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );
 727 | 					_uv3x = 0.5 * _normal.x + 0.5;
 728 | 					_uv3y = 0.5 * _normal.y + 0.5;
 729 | 
 730 | 					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );
 731 | 
 732 | 				} else if ( material.envMap.mapping instanceof THREE.SphericalRefractionMapping ) {
 733 | 
 734 | 					_normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );
 735 | 					_uv1x = - 0.5 * _normal.x + 0.5;
 736 | 					_uv1y = - 0.5 * _normal.y + 0.5;
 737 | 
 738 | 					_normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );
 739 | 					_uv2x = - 0.5 * _normal.x + 0.5;
 740 | 					_uv2y = - 0.5 * _normal.y + 0.5;
 741 | 
 742 | 					_normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );
 743 | 					_uv3x = - 0.5 * _normal.x + 0.5;
 744 | 					_uv3y = - 0.5 * _normal.y + 0.5;
 745 | 
 746 | 					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );
 747 | 
 748 | 				}
 749 | 
 750 | 
 751 | 			} else {
 752 | 
 753 | 				_color.copy( material.color );
 754 | 
 755 | 				if ( material.vertexColors === THREE.FaceColors ) {
 756 | 
 757 | 					_color.multiply( element.color );
 758 | 
 759 | 				}
 760 | 
 761 | 				material.wireframe === true
 762 | 					 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 763 | 					 : fillPath( _color );
 764 | 
 765 | 			}
 766 | 
 767 | 		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 768 | 
 769 | 			_color.r = _color.g = _color.b = 1 - smoothstep( v1.positionScreen.z * v1.positionScreen.w, _camera.near, _camera.far );
 770 | 
 771 | 			material.wireframe === true
 772 | 					 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 773 | 					 : fillPath( _color );
 774 | 
 775 | 		} else if ( material instanceof THREE.MeshNormalMaterial ) {
 776 | 
 777 | 			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
 778 | 
 779 | 			_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
 780 | 
 781 | 			material.wireframe === true
 782 | 				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 783 | 				 : fillPath( _color );
 784 | 
 785 | 		} else {
 786 | 
 787 | 			_color.setRGB( 1, 1, 1 );
 788 | 
 789 | 			material.wireframe === true
 790 | 				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 791 | 				 : fillPath( _color );
 792 | 
 793 | 		}
 794 | 
 795 | 	}
 796 | 
 797 | 	//
 798 | 
 799 | 	function drawTriangle( x0, y0, x1, y1, x2, y2 ) {
 800 | 
 801 | 		_context.beginPath();
 802 | 		_context.moveTo( x0, y0 );
 803 | 		_context.lineTo( x1, y1 );
 804 | 		_context.lineTo( x2, y2 );
 805 | 		_context.closePath();
 806 | 
 807 | 	}
 808 | 
 809 | 	function strokePath( color, linewidth, linecap, linejoin ) {
 810 | 
 811 | 		setLineWidth( linewidth );
 812 | 		setLineCap( linecap );
 813 | 		setLineJoin( linejoin );
 814 | 		setStrokeStyle( color.getStyle() );
 815 | 
 816 | 		_context.stroke();
 817 | 
 818 | 		_elemBox.expandByScalar( linewidth * 2 );
 819 | 
 820 | 	}
 821 | 
 822 | 	function fillPath( color ) {
 823 | 
 824 | 		setFillStyle( color.getStyle() );
 825 | 		_context.fill();
 826 | 
 827 | 	}
 828 | 
 829 | 	function onTextureUpdate ( event ) {
 830 | 
 831 | 		textureToPattern( event.target );
 832 | 
 833 | 	}
 834 | 
 835 | 	function textureToPattern( texture ) {
 836 | 
 837 | 		if ( texture instanceof THREE.CompressedTexture ) return;
 838 | 
 839 | 		var repeatX = texture.wrapS === THREE.RepeatWrapping;
 840 | 		var repeatY = texture.wrapT === THREE.RepeatWrapping;
 841 | 
 842 | 		var image = texture.image;
 843 | 
 844 | 		var canvas = document.createElement( 'canvas' );
 845 | 		canvas.width = image.width;
 846 | 		canvas.height = image.height;
 847 | 
 848 | 		var context = canvas.getContext( '2d' );
 849 | 		context.setTransform( 1, 0, 0, - 1, 0, image.height );
 850 | 		context.drawImage( image, 0, 0 );
 851 | 
 852 | 		_patterns[ texture.id ] = _context.createPattern(
 853 | 			canvas, repeatX === true && repeatY === true
 854 | 				 ? 'repeat'
 855 | 				 : repeatX === true && repeatY === false
 856 | 					 ? 'repeat-x'
 857 | 					 : repeatX === false && repeatY === true
 858 | 						 ? 'repeat-y'
 859 | 						 : 'no-repeat'
 860 | 		);
 861 | 
 862 | 	}
 863 | 
 864 | 	function patternPath( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, texture ) {
 865 | 
 866 | 		if ( texture instanceof THREE.DataTexture ) return;
 867 | 
 868 | 		if ( texture.hasEventListener( 'update', onTextureUpdate ) === false ) {
 869 | 
 870 | 			if ( texture.image !== undefined && texture.image.width > 0 ) {
 871 | 
 872 | 				textureToPattern( texture );
 873 | 
 874 | 			}
 875 | 
 876 | 			texture.addEventListener( 'update', onTextureUpdate );
 877 | 
 878 | 		}
 879 | 
 880 | 		var pattern = _patterns[ texture.id ];
 881 | 
 882 | 		if ( pattern !== undefined ) {
 883 | 
 884 | 			setFillStyle( pattern );
 885 | 
 886 | 		} else {
 887 | 
 888 | 			setFillStyle( 'rgba(0,0,0,1)' );
 889 | 			_context.fill();
 890 | 
 891 | 			return;
 892 | 
 893 | 		}
 894 | 
 895 | 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 896 | 
 897 | 		var a, b, c, d, e, f, det, idet,
 898 | 		offsetX = texture.offset.x / texture.repeat.x,
 899 | 		offsetY = texture.offset.y / texture.repeat.y,
 900 | 		width = texture.image.width * texture.repeat.x,
 901 | 		height = texture.image.height * texture.repeat.y;
 902 | 
 903 | 		u0 = ( u0 + offsetX ) * width;
 904 | 		v0 = ( v0 + offsetY ) * height;
 905 | 
 906 | 		u1 = ( u1 + offsetX ) * width;
 907 | 		v1 = ( v1 + offsetY ) * height;
 908 | 
 909 | 		u2 = ( u2 + offsetX ) * width;
 910 | 		v2 = ( v2 + offsetY ) * height;
 911 | 
 912 | 		x1 -= x0; y1 -= y0;
 913 | 		x2 -= x0; y2 -= y0;
 914 | 
 915 | 		u1 -= u0; v1 -= v0;
 916 | 		u2 -= u0; v2 -= v0;
 917 | 
 918 | 		det = u1 * v2 - u2 * v1;
 919 | 
 920 | 		if ( det === 0 ) return;
 921 | 
 922 | 		idet = 1 / det;
 923 | 
 924 | 		a = ( v2 * x1 - v1 * x2 ) * idet;
 925 | 		b = ( v2 * y1 - v1 * y2 ) * idet;
 926 | 		c = ( u1 * x2 - u2 * x1 ) * idet;
 927 | 		d = ( u1 * y2 - u2 * y1 ) * idet;
 928 | 
 929 | 		e = x0 - a * u0 - c * v0;
 930 | 		f = y0 - b * u0 - d * v0;
 931 | 
 932 | 		_context.save();
 933 | 		_context.transform( a, b, c, d, e, f );
 934 | 		_context.fill();
 935 | 		_context.restore();
 936 | 
 937 | 	}
 938 | 
 939 | 	function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
 940 | 
 941 | 		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 942 | 
 943 | 		var a, b, c, d, e, f, det, idet,
 944 | 		width = image.width - 1,
 945 | 		height = image.height - 1;
 946 | 
 947 | 		u0 *= width; v0 *= height;
 948 | 		u1 *= width; v1 *= height;
 949 | 		u2 *= width; v2 *= height;
 950 | 
 951 | 		x1 -= x0; y1 -= y0;
 952 | 		x2 -= x0; y2 -= y0;
 953 | 
 954 | 		u1 -= u0; v1 -= v0;
 955 | 		u2 -= u0; v2 -= v0;
 956 | 
 957 | 		det = u1 * v2 - u2 * v1;
 958 | 
 959 | 		idet = 1 / det;
 960 | 
 961 | 		a = ( v2 * x1 - v1 * x2 ) * idet;
 962 | 		b = ( v2 * y1 - v1 * y2 ) * idet;
 963 | 		c = ( u1 * x2 - u2 * x1 ) * idet;
 964 | 		d = ( u1 * y2 - u2 * y1 ) * idet;
 965 | 
 966 | 		e = x0 - a * u0 - c * v0;
 967 | 		f = y0 - b * u0 - d * v0;
 968 | 
 969 | 		_context.save();
 970 | 		_context.transform( a, b, c, d, e, f );
 971 | 		_context.clip();
 972 | 		_context.drawImage( image, 0, 0 );
 973 | 		_context.restore();
 974 | 
 975 | 	}
 976 | 
 977 | 	// Hide anti-alias gaps
 978 | 
 979 | 	function expand( v1, v2, pixels ) {
 980 | 
 981 | 		var x = v2.x - v1.x, y = v2.y - v1.y,
 982 | 		det = x * x + y * y, idet;
 983 | 
 984 | 		if ( det === 0 ) return;
 985 | 
 986 | 		idet = pixels / Math.sqrt( det );
 987 | 
 988 | 		x *= idet; y *= idet;
 989 | 
 990 | 		v2.x += x; v2.y += y;
 991 | 		v1.x -= x; v1.y -= y;
 992 | 
 993 | 	}
 994 | 
 995 | 	// Context cached methods.
 996 | 
 997 | 	function setOpacity( value ) {
 998 | 
 999 | 		if ( _contextGlobalAlpha !== value ) {
1000 | 
1001 | 			_context.globalAlpha = value;
1002 | 			_contextGlobalAlpha = value;
1003 | 
1004 | 		}
1005 | 
1006 | 	}
1007 | 
1008 | 	function setBlending( value ) {
1009 | 
1010 | 		if ( _contextGlobalCompositeOperation !== value ) {
1011 | 
1012 | 			if ( value === THREE.NormalBlending ) {
1013 | 
1014 | 				_context.globalCompositeOperation = 'source-over';
1015 | 
1016 | 			} else if ( value === THREE.AdditiveBlending ) {
1017 | 
1018 | 				_context.globalCompositeOperation = 'lighter';
1019 | 
1020 | 			} else if ( value === THREE.SubtractiveBlending ) {
1021 | 
1022 | 				_context.globalCompositeOperation = 'darker';
1023 | 
1024 | 			}
1025 | 
1026 | 			_contextGlobalCompositeOperation = value;
1027 | 
1028 | 		}
1029 | 
1030 | 	}
1031 | 
1032 | 	function setLineWidth( value ) {
1033 | 
1034 | 		if ( _contextLineWidth !== value ) {
1035 | 
1036 | 			_context.lineWidth = value;
1037 | 			_contextLineWidth = value;
1038 | 
1039 | 		}
1040 | 
1041 | 	}
1042 | 
1043 | 	function setLineCap( value ) {
1044 | 
1045 | 		// "butt", "round", "square"
1046 | 
1047 | 		if ( _contextLineCap !== value ) {
1048 | 
1049 | 			_context.lineCap = value;
1050 | 			_contextLineCap = value;
1051 | 
1052 | 		}
1053 | 
1054 | 	}
1055 | 
1056 | 	function setLineJoin( value ) {
1057 | 
1058 | 		// "round", "bevel", "miter"
1059 | 
1060 | 		if ( _contextLineJoin !== value ) {
1061 | 
1062 | 			_context.lineJoin = value;
1063 | 			_contextLineJoin = value;
1064 | 
1065 | 		}
1066 | 
1067 | 	}
1068 | 
1069 | 	function setStrokeStyle( value ) {
1070 | 
1071 | 		if ( _contextStrokeStyle !== value ) {
1072 | 
1073 | 			_context.strokeStyle = value;
1074 | 			_contextStrokeStyle = value;
1075 | 
1076 | 		}
1077 | 
1078 | 	}
1079 | 
1080 | 	function setFillStyle( value ) {
1081 | 
1082 | 		if ( _contextFillStyle !== value ) {
1083 | 
1084 | 			_context.fillStyle = value;
1085 | 			_contextFillStyle = value;
1086 | 
1087 | 		}
1088 | 
1089 | 	}
1090 | 
1091 | 	function setLineDash( value ) {
1092 | 
1093 | 		if ( _contextLineDash.length !== value.length ) {
1094 | 
1095 | 			_context.setLineDash( value );
1096 | 			_contextLineDash = value;
1097 | 
1098 | 		}
1099 | 
1100 | 	}
1101 | 
1102 | };
1103 | 


--------------------------------------------------------------------------------
/libs/CopyShader.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author alteredq / http://alteredqualia.com/
 3 |  *
 4 |  * Full-screen textured quad shader
 5 |  */
 6 | 
 7 | THREE.CopyShader = {
 8 | 
 9 | 	uniforms: {
10 | 
11 | 		"tDiffuse": { type: "t", value: null },
12 | 		"opacity":  { type: "f", value: 1.0 }
13 | 
14 | 	},
15 | 
16 | 	vertexShader: [
17 | 
18 | 		"varying vec2 vUv;",
19 | 
20 | 		"void main() {",
21 | 
22 | 			"vUv = uv;",
23 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
24 | 
25 | 		"}"
26 | 
27 | 	].join("\n"),
28 | 
29 | 	fragmentShader: [
30 | 
31 | 		"uniform float opacity;",
32 | 
33 | 		"uniform sampler2D tDiffuse;",
34 | 
35 | 		"varying vec2 vUv;",
36 | 
37 | 		"void main() {",
38 | 
39 | 			"vec4 texel = texture2D( tDiffuse, vUv );",
40 | 			"gl_FragColor = opacity * texel;",
41 | 
42 | 		"}"
43 | 
44 | 	].join("\n")
45 | 
46 | };
47 | 


--------------------------------------------------------------------------------
/libs/EffectComposer.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author alteredq / http://alteredqualia.com/
  3 |  */
  4 | 
  5 | THREE.EffectComposer = function ( renderer, renderTarget ) {
  6 | 
  7 | 	this.renderer = renderer;
  8 | 
  9 | 	if ( renderTarget === undefined ) {
 10 | 
 11 | 		var width = window.innerWidth || 1;
 12 | 		var height = window.innerHeight || 1;
 13 | 		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
 14 | 
 15 | 		renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
 16 | 
 17 | 	}
 18 | 
 19 | 	this.renderTarget1 = renderTarget;
 20 | 	this.renderTarget2 = renderTarget.clone();
 21 | 
 22 | 	this.writeBuffer = this.renderTarget1;
 23 | 	this.readBuffer = this.renderTarget2;
 24 | 
 25 | 	this.passes = [];
 26 | 
 27 | 	if ( THREE.CopyShader === undefined )
 28 | 		console.error( "THREE.EffectComposer relies on THREE.CopyShader" );
 29 | 
 30 | 	this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
 31 | 
 32 | };
 33 | 
 34 | THREE.EffectComposer.prototype = {
 35 | 
 36 | 	swapBuffers: function() {
 37 | 
 38 | 		var tmp = this.readBuffer;
 39 | 		this.readBuffer = this.writeBuffer;
 40 | 		this.writeBuffer = tmp;
 41 | 
 42 | 	},
 43 | 
 44 | 	addPass: function ( pass ) {
 45 | 
 46 | 		this.passes.push( pass );
 47 | 
 48 | 	},
 49 | 
 50 | 	insertPass: function ( pass, index ) {
 51 | 
 52 | 		this.passes.splice( index, 0, pass );
 53 | 
 54 | 	},
 55 | 
 56 | 	render: function ( delta ) {
 57 | 
 58 | 		this.writeBuffer = this.renderTarget1;
 59 | 		this.readBuffer = this.renderTarget2;
 60 | 
 61 | 		var maskActive = false;
 62 | 
 63 | 		var pass, i, il = this.passes.length;
 64 | 
 65 | 		for ( i = 0; i < il; i ++ ) {
 66 | 
 67 | 			pass = this.passes[ i ];
 68 | 
 69 | 			if ( !pass.enabled ) continue;
 70 | 
 71 | 			pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
 72 | 
 73 | 			if ( pass.needsSwap ) {
 74 | 
 75 | 				if ( maskActive ) {
 76 | 
 77 | 					var context = this.renderer.context;
 78 | 
 79 | 					context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
 80 | 
 81 | 					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
 82 | 
 83 | 					context.stencilFunc( context.EQUAL, 1, 0xffffffff );
 84 | 
 85 | 				}
 86 | 
 87 | 				this.swapBuffers();
 88 | 
 89 | 			}
 90 | 
 91 | 			if ( pass instanceof THREE.MaskPass ) {
 92 | 
 93 | 				maskActive = true;
 94 | 
 95 | 			} else if ( pass instanceof THREE.ClearMaskPass ) {
 96 | 
 97 | 				maskActive = false;
 98 | 
 99 | 			}
100 | 
101 | 		}
102 | 
103 | 	},
104 | 
105 | 	reset: function ( renderTarget ) {
106 | 
107 | 		if ( renderTarget === undefined ) {
108 | 
109 | 			renderTarget = this.renderTarget1.clone();
110 | 
111 | 			renderTarget.width = window.innerWidth;
112 | 			renderTarget.height = window.innerHeight;
113 | 
114 | 		}
115 | 
116 | 		this.renderTarget1 = renderTarget;
117 | 		this.renderTarget2 = renderTarget.clone();
118 | 
119 | 		this.writeBuffer = this.renderTarget1;
120 | 		this.readBuffer = this.renderTarget2;
121 | 
122 | 	},
123 | 
124 | 	setSize: function ( width, height ) {
125 | 
126 | 		var renderTarget = this.renderTarget1.clone();
127 | 
128 | 		renderTarget.width = width;
129 | 		renderTarget.height = height;
130 | 
131 | 		this.reset( renderTarget );
132 | 
133 | 	}
134 | 
135 | };
136 | 
137 | // shared ortho camera
138 | 
139 | THREE.EffectComposer.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
140 | 
141 | THREE.EffectComposer.quad = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), null );
142 | 
143 | THREE.EffectComposer.scene = new THREE.Scene();
144 | THREE.EffectComposer.scene.add( THREE.EffectComposer.quad );
145 | 


--------------------------------------------------------------------------------
/libs/FXAAShader.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author alteredq / http://alteredqualia.com/
  3 |  * @author davidedc / http://www.sketchpatch.net/
  4 |  *
  5 |  * NVIDIA FXAA by Timothy Lottes
  6 |  * http://timothylottes.blogspot.com/2011/06/fxaa3-source-released.html
  7 |  * - WebGL port by @supereggbert
  8 |  * http://www.glge.org/demos/fxaa/
  9 |  */
 10 | 
 11 | THREE.FXAAShader = {
 12 | 
 13 | 	uniforms: {
 14 | 
 15 | 		"tDiffuse":   { type: "t", value: null },
 16 | 		"resolution": { type: "v2", value: new THREE.Vector2( 1 / 1024, 1 / 512 )  }
 17 | 
 18 | 	},
 19 | 
 20 | 	vertexShader: [
 21 | 
 22 | 		"varying vec2 vUv;",
 23 | 
 24 | 		"void main() {",
 25 | 
 26 | 			"vUv = uv;",
 27 | 			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 28 | 
 29 | 		"}"
 30 | 
 31 | 	].join("\n"),
 32 | 
 33 | 	fragmentShader: [
 34 | 
 35 | 		"uniform sampler2D tDiffuse;",
 36 | 		"uniform vec2 resolution;",
 37 | 
 38 | 		"varying vec2 vUv;",
 39 | 
 40 | 		"#define FXAA_REDUCE_MIN   (1.0/128.0)",
 41 | 		"#define FXAA_REDUCE_MUL   (1.0/8.0)",
 42 | 		"#define FXAA_SPAN_MAX     8.0",
 43 | 
 44 | 		"void main() {",
 45 | 
 46 | 			"vec3 rgbNW = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( -1.0, -1.0 ) ) * resolution ).xyz;",
 47 | 			"vec3 rgbNE = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( 1.0, -1.0 ) ) * resolution ).xyz;",
 48 | 			"vec3 rgbSW = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( -1.0, 1.0 ) ) * resolution ).xyz;",
 49 | 			"vec3 rgbSE = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( 1.0, 1.0 ) ) * resolution ).xyz;",
 50 | 			"vec4 rgbaM  = texture2D( tDiffuse,  gl_FragCoord.xy  * resolution );",
 51 | 			"vec3 rgbM  = rgbaM.xyz;",
 52 | 			"float opacity  = rgbaM.w;",
 53 | 
 54 | 			"vec3 luma = vec3( 0.299, 0.587, 0.114 );",
 55 | 
 56 | 			"float lumaNW = dot( rgbNW, luma );",
 57 | 			"float lumaNE = dot( rgbNE, luma );",
 58 | 			"float lumaSW = dot( rgbSW, luma );",
 59 | 			"float lumaSE = dot( rgbSE, luma );",
 60 | 			"float lumaM  = dot( rgbM,  luma );",
 61 | 			"float lumaMin = min( lumaM, min( min( lumaNW, lumaNE ), min( lumaSW, lumaSE ) ) );",
 62 | 			"float lumaMax = max( lumaM, max( max( lumaNW, lumaNE) , max( lumaSW, lumaSE ) ) );",
 63 | 
 64 | 			"vec2 dir;",
 65 | 			"dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));",
 66 | 			"dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));",
 67 | 
 68 | 			"float dirReduce = max( ( lumaNW + lumaNE + lumaSW + lumaSE ) * ( 0.25 * FXAA_REDUCE_MUL ), FXAA_REDUCE_MIN );",
 69 | 
 70 | 			"float rcpDirMin = 1.0 / ( min( abs( dir.x ), abs( dir.y ) ) + dirReduce );",
 71 | 			"dir = min( vec2( FXAA_SPAN_MAX,  FXAA_SPAN_MAX),",
 72 | 				  "max( vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),",
 73 | 						"dir * rcpDirMin)) * resolution;",
 74 | 
 75 | 			"vec3 rgbA = 0.5 * (",
 76 | 				"texture2D( tDiffuse, gl_FragCoord.xy  * resolution + dir * ( 1.0 / 3.0 - 0.5 ) ).xyz +",
 77 | 				"texture2D( tDiffuse, gl_FragCoord.xy  * resolution + dir * ( 2.0 / 3.0 - 0.5 ) ).xyz );",
 78 | 
 79 | 			"vec3 rgbB = rgbA * 0.5 + 0.25 * (",
 80 | 				"texture2D( tDiffuse, gl_FragCoord.xy  * resolution + dir * -0.5 ).xyz +",
 81 | 				"texture2D( tDiffuse, gl_FragCoord.xy  * resolution + dir * 0.5 ).xyz );",
 82 | 
 83 | 			"float lumaB = dot( rgbB, luma );",
 84 | 
 85 | 			"if ( ( lumaB < lumaMin ) || ( lumaB > lumaMax ) ) {",
 86 | 
 87 | 				"gl_FragColor = vec4( rgbA, opacity );",
 88 | 
 89 | 			"} else {",
 90 | 
 91 | 				"gl_FragColor = vec4( rgbB, opacity );",
 92 | 
 93 | 			"}",
 94 | 
 95 | 		"}"
 96 | 
 97 | 	].join("\n")
 98 | 
 99 | };
100 | 


--------------------------------------------------------------------------------
/libs/MaskPass.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author alteredq / http://alteredqualia.com/
 3 |  */
 4 | 
 5 | THREE.MaskPass = function ( scene, camera ) {
 6 | 
 7 | 	this.scene = scene;
 8 | 	this.camera = camera;
 9 | 
10 | 	this.enabled = true;
11 | 	this.clear = true;
12 | 	this.needsSwap = false;
13 | 
14 | 	this.inverse = false;
15 | 
16 | };
17 | 
18 | THREE.MaskPass.prototype = {
19 | 
20 | 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
21 | 
22 | 		var context = renderer.context;
23 | 
24 | 		// don't update color or depth
25 | 
26 | 		context.colorMask( false, false, false, false );
27 | 		context.depthMask( false );
28 | 
29 | 		// set up stencil
30 | 
31 | 		var writeValue, clearValue;
32 | 
33 | 		if ( this.inverse ) {
34 | 
35 | 			writeValue = 0;
36 | 			clearValue = 1;
37 | 
38 | 		} else {
39 | 
40 | 			writeValue = 1;
41 | 			clearValue = 0;
42 | 
43 | 		}
44 | 
45 | 		context.enable( context.STENCIL_TEST );
46 | 		context.stencilOp( context.REPLACE, context.REPLACE, context.REPLACE );
47 | 		context.stencilFunc( context.ALWAYS, writeValue, 0xffffffff );
48 | 		context.clearStencil( clearValue );
49 | 
50 | 		// draw into the stencil buffer
51 | 
52 | 		renderer.render( this.scene, this.camera, readBuffer, this.clear );
53 | 		renderer.render( this.scene, this.camera, writeBuffer, this.clear );
54 | 
55 | 		// re-enable update of color and depth
56 | 
57 | 		context.colorMask( true, true, true, true );
58 | 		context.depthMask( true );
59 | 
60 | 		// only render where stencil is set to 1
61 | 
62 | 		context.stencilFunc( context.EQUAL, 1, 0xffffffff );  // draw if == 1
63 | 		context.stencilOp( context.KEEP, context.KEEP, context.KEEP );
64 | 
65 | 	}
66 | 
67 | };
68 | 
69 | 
70 | THREE.ClearMaskPass = function () {
71 | 
72 | 	this.enabled = true;
73 | 
74 | };
75 | 
76 | THREE.ClearMaskPass.prototype = {
77 | 
78 | 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
79 | 
80 | 		var context = renderer.context;
81 | 
82 | 		context.disable( context.STENCIL_TEST );
83 | 
84 | 	}
85 | 
86 | };
87 | 


--------------------------------------------------------------------------------
/libs/OrbitControls.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author qiao / https://github.com/qiao
  3 |  * @author mrdoob / http://mrdoob.com
  4 |  * @author alteredq / http://alteredqualia.com/
  5 |  * @author WestLangley / http://github.com/WestLangley
  6 |  */
  7 | 
  8 | THREE.OrbitControls = function ( object, domElement ) {
  9 | 
 10 |     this.object = object;
 11 |     this.domElement = ( domElement !== undefined ) ? domElement : document;
 12 | 
 13 |     // API
 14 | 
 15 |     this.enabled = true;
 16 | 
 17 |     this.center = new THREE.Vector3();
 18 | 
 19 |     this.userZoom = true;
 20 |     this.userZoomSpeed = 1.0;
 21 | 
 22 |     this.userRotate = true;
 23 |     this.userRotateSpeed = 1.0;
 24 | 
 25 |     this.userPan = true;
 26 |     this.userPanSpeed = 2.0;
 27 | 
 28 |     this.autoRotate = false;
 29 |     this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
 30 | 
 31 |     this.minPolarAngle = 0; // radians
 32 |     this.maxPolarAngle = Math.PI; // radians
 33 | 
 34 |     this.minDistance = 0;
 35 |     this.maxDistance = Infinity;
 36 | 
 37 |     this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
 38 | 
 39 |     // internals
 40 | 
 41 |     var scope = this;
 42 | 
 43 |     var EPS = 0.000001;
 44 |     var PIXELS_PER_ROUND = 1800;
 45 | 
 46 |     var rotateStart = new THREE.Vector2();
 47 |     var rotateEnd = new THREE.Vector2();
 48 |     var rotateDelta = new THREE.Vector2();
 49 | 
 50 |     var zoomStart = new THREE.Vector2();
 51 |     var zoomEnd = new THREE.Vector2();
 52 |     var zoomDelta = new THREE.Vector2();
 53 | 
 54 |     var phiDelta = 0;
 55 |     var thetaDelta = 0;
 56 |     var scale = 1;
 57 | 
 58 |     var lastPosition = new THREE.Vector3();
 59 | 
 60 |     var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 };
 61 |     var state = STATE.NONE;
 62 | 
 63 |     // events
 64 | 
 65 |     var changeEvent = { type: 'change' };
 66 | 
 67 | 
 68 |     this.rotateLeft = function ( angle ) {
 69 | 
 70 |         if ( angle === undefined ) {
 71 | 
 72 |             angle = getAutoRotationAngle();
 73 | 
 74 |         }
 75 | 
 76 |         thetaDelta -= angle;
 77 | 
 78 |     };
 79 | 
 80 |     this.rotateRight = function ( angle ) {
 81 | 
 82 |         if ( angle === undefined ) {
 83 | 
 84 |             angle = getAutoRotationAngle();
 85 | 
 86 |         }
 87 | 
 88 |         thetaDelta += angle;
 89 | 
 90 |     };
 91 | 
 92 |     this.rotateUp = function ( angle ) {
 93 | 
 94 |         if ( angle === undefined ) {
 95 | 
 96 |             angle = getAutoRotationAngle();
 97 | 
 98 |         }
 99 | 
100 |         phiDelta -= angle;
101 | 
102 |     };
103 | 
104 |     this.rotateDown = function ( angle ) {
105 | 
106 |         if ( angle === undefined ) {
107 | 
108 |             angle = getAutoRotationAngle();
109 | 
110 |         }
111 | 
112 |         phiDelta += angle;
113 | 
114 |     };
115 | 
116 |     this.zoomIn = function ( zoomScale ) {
117 | 
118 |         if ( zoomScale === undefined ) {
119 | 
120 |             zoomScale = getZoomScale();
121 | 
122 |         }
123 | 
124 |         scale /= zoomScale;
125 | 
126 |     };
127 | 
128 |     this.zoomOut = function ( zoomScale ) {
129 | 
130 |         if ( zoomScale === undefined ) {
131 | 
132 |             zoomScale = getZoomScale();
133 | 
134 |         }
135 | 
136 |         scale *= zoomScale;
137 | 
138 |     };
139 | 
140 |     this.pan = function ( distance ) {
141 | 
142 |         distance.transformDirection( this.object.matrix );
143 |         distance.multiplyScalar( scope.userPanSpeed );
144 | 
145 |         this.object.position.add( distance );
146 |         this.center.add( distance );
147 | 
148 |     };
149 | 
150 |     this.update = function () {
151 | 
152 |         var position = this.object.position;
153 |         var offset = position.clone().sub( this.center );
154 | 
155 |         // angle from z-axis around y-axis
156 | 
157 |         var theta = Math.atan2( offset.x, offset.z );
158 | 
159 |         // angle from y-axis
160 | 
161 |         var phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y );
162 | 
163 |         if ( this.autoRotate ) {
164 | 
165 |             this.rotateLeft( getAutoRotationAngle() );
166 | 
167 |         }
168 | 
169 |         theta += thetaDelta;
170 |         phi += phiDelta;
171 | 
172 |         // restrict phi to be between desired limits
173 |         phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) );
174 | 
175 |         // restrict phi to be betwee EPS and PI-EPS
176 |         phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );
177 | 
178 |         var radius = offset.length() * scale;
179 | 
180 |         // restrict radius to be between desired limits
181 |         radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) );
182 | 
183 |         offset.x = radius * Math.sin( phi ) * Math.sin( theta );
184 |         offset.y = radius * Math.cos( phi );
185 |         offset.z = radius * Math.sin( phi ) * Math.cos( theta );
186 | 
187 |         position.copy( this.center ).add( offset );
188 | 
189 |         this.object.lookAt( this.center );
190 | 
191 |         thetaDelta = 0;
192 |         phiDelta = 0;
193 |         scale = 1;
194 | 
195 |         if ( lastPosition.distanceTo( this.object.position ) > 0 ) {
196 | 
197 |             this.dispatchEvent( changeEvent );
198 | 
199 |             lastPosition.copy( this.object.position );
200 | 
201 |         }
202 | 
203 |     };
204 | 
205 | 
206 |     function getAutoRotationAngle() {
207 | 
208 |         return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
209 | 
210 |     }
211 | 
212 |     function getZoomScale() {
213 | 
214 |         return Math.pow( 0.95, scope.userZoomSpeed );
215 | 
216 |     }
217 | 
218 |     function onMouseDown( event ) {
219 | 
220 |         if ( scope.enabled === false ) return;
221 |         if ( scope.userRotate === false ) return;
222 | 
223 |         event.preventDefault();
224 | 
225 |         if ( event.button === 0 ) {
226 | 
227 |             state = STATE.ROTATE;
228 | 
229 |             rotateStart.set( event.clientX, event.clientY );
230 | 
231 |         } else if ( event.button === 1 ) {
232 | 
233 |             state = STATE.ZOOM;
234 | 
235 |             zoomStart.set( event.clientX, event.clientY );
236 | 
237 |         } else if ( event.button === 2 ) {
238 | 
239 |             state = STATE.PAN;
240 | 
241 |         }
242 | 
243 |         document.addEventListener( 'mousemove', onMouseMove, false );
244 |         document.addEventListener( 'mouseup', onMouseUp, false );
245 | 
246 |     }
247 | 
248 |     function onMouseMove( event ) {
249 | 
250 |         if ( scope.enabled === false ) return;
251 | 
252 |         event.preventDefault();
253 | 
254 |         if ( state === STATE.ROTATE ) {
255 | 
256 |             rotateEnd.set( event.clientX, event.clientY );
257 |             rotateDelta.subVectors( rotateEnd, rotateStart );
258 | 
259 |             scope.rotateLeft( 2 * Math.PI * rotateDelta.x / PIXELS_PER_ROUND * scope.userRotateSpeed );
260 |             scope.rotateUp( 2 * Math.PI * rotateDelta.y / PIXELS_PER_ROUND * scope.userRotateSpeed );
261 | 
262 |             rotateStart.copy( rotateEnd );
263 | 
264 |         } else if ( state === STATE.ZOOM ) {
265 | 
266 |             zoomEnd.set( event.clientX, event.clientY );
267 |             zoomDelta.subVectors( zoomEnd, zoomStart );
268 | 
269 |             if ( zoomDelta.y > 0 ) {
270 | 
271 |                 scope.zoomIn();
272 | 
273 |             } else {
274 | 
275 |                 scope.zoomOut();
276 | 
277 |             }
278 | 
279 |             zoomStart.copy( zoomEnd );
280 | 
281 |         } else if ( state === STATE.PAN ) {
282 | 
283 |             var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
284 |             var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
285 | 
286 |             scope.pan( new THREE.Vector3( - movementX, movementY, 0 ) );
287 | 
288 |         }
289 | 
290 |     }
291 | 
292 |     function onMouseUp( event ) {
293 | 
294 |         if ( scope.enabled === false ) return;
295 |         if ( scope.userRotate === false ) return;
296 | 
297 |         document.removeEventListener( 'mousemove', onMouseMove, false );
298 |         document.removeEventListener( 'mouseup', onMouseUp, false );
299 | 
300 |         state = STATE.NONE;
301 | 
302 |     }
303 | 
304 |     function onMouseWheel( event ) {
305 | 
306 |         if ( scope.enabled === false ) return;
307 |         if ( scope.userZoom === false ) return;
308 | 
309 |         var delta = 0;
310 | 
311 |         if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9
312 | 
313 |             delta = event.wheelDelta;
314 | 
315 |         } else if ( event.detail ) { // Firefox
316 | 
317 |             delta = - event.detail;
318 | 
319 |         }
320 | 
321 |         if ( delta > 0 ) {
322 | 
323 |             scope.zoomOut();
324 | 
325 |         } else {
326 | 
327 |             scope.zoomIn();
328 | 
329 |         }
330 | 
331 |     }
332 | 
333 |     function onKeyDown( event ) {
334 | 
335 |         if ( scope.enabled === false ) return;
336 |         if ( scope.userPan === false ) return;
337 | 
338 |         switch ( event.keyCode ) {
339 | 
340 |             case scope.keys.UP:
341 |                 scope.pan( new THREE.Vector3( 0, 1, 0 ) );
342 |                 break;
343 |             case scope.keys.BOTTOM:
344 |                 scope.pan( new THREE.Vector3( 0, - 1, 0 ) );
345 |                 break;
346 |             case scope.keys.LEFT:
347 |                 scope.pan( new THREE.Vector3( - 1, 0, 0 ) );
348 |                 break;
349 |             case scope.keys.RIGHT:
350 |                 scope.pan( new THREE.Vector3( 1, 0, 0 ) );
351 |                 break;
352 |         }
353 | 
354 |     }
355 | 
356 |     this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
357 |     this.domElement.addEventListener( 'mousedown', onMouseDown, false );
358 |     this.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
359 |     this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox
360 |     this.domElement.addEventListener( 'keydown', onKeyDown, false );
361 | 
362 | };
363 | 
364 | THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );


--------------------------------------------------------------------------------
/libs/Projector.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author mrdoob / http://mrdoob.com/
  3 |  * @author supereggbert / http://www.paulbrunt.co.uk/
  4 |  * @author julianwa / https://github.com/julianwa
  5 |  */
  6 | 
  7 | THREE.RenderableObject = function () {
  8 | 
  9 | 	this.id = 0;
 10 | 
 11 | 	this.object = null;
 12 | 	this.z = 0;
 13 | 
 14 | };
 15 | 
 16 | //
 17 | 
 18 | THREE.RenderableFace = function () {
 19 | 
 20 | 	this.id = 0;
 21 | 
 22 | 	this.v1 = new THREE.RenderableVertex();
 23 | 	this.v2 = new THREE.RenderableVertex();
 24 | 	this.v3 = new THREE.RenderableVertex();
 25 | 
 26 | 	this.normalModel = new THREE.Vector3();
 27 | 
 28 | 	this.vertexNormalsModel = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
 29 | 	this.vertexNormalsLength = 0;
 30 | 
 31 | 	this.color = new THREE.Color();
 32 | 	this.material = null;
 33 | 	this.uvs = [ new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2() ];
 34 | 
 35 | 	this.z = 0;
 36 | 
 37 | };
 38 | 
 39 | //
 40 | 
 41 | THREE.RenderableVertex = function () {
 42 | 
 43 | 	this.position = new THREE.Vector3();
 44 | 	this.positionWorld = new THREE.Vector3();
 45 | 	this.positionScreen = new THREE.Vector4();
 46 | 
 47 | 	this.visible = true;
 48 | 
 49 | };
 50 | 
 51 | THREE.RenderableVertex.prototype.copy = function ( vertex ) {
 52 | 
 53 | 	this.positionWorld.copy( vertex.positionWorld );
 54 | 	this.positionScreen.copy( vertex.positionScreen );
 55 | 
 56 | };
 57 | 
 58 | //
 59 | 
 60 | THREE.RenderableLine = function () {
 61 | 
 62 | 	this.id = 0;
 63 | 
 64 | 	this.v1 = new THREE.RenderableVertex();
 65 | 	this.v2 = new THREE.RenderableVertex();
 66 | 
 67 | 	this.vertexColors = [ new THREE.Color(), new THREE.Color() ];
 68 | 	this.material = null;
 69 | 
 70 | 	this.z = 0;
 71 | 
 72 | };
 73 | 
 74 | //
 75 | 
 76 | THREE.RenderableSprite = function () {
 77 | 
 78 | 	this.id = 0;
 79 | 
 80 | 	this.object = null;
 81 | 
 82 | 	this.x = 0;
 83 | 	this.y = 0;
 84 | 	this.z = 0;
 85 | 
 86 | 	this.rotation = 0;
 87 | 	this.scale = new THREE.Vector2();
 88 | 
 89 | 	this.material = null;
 90 | 
 91 | };
 92 | 
 93 | //
 94 | 
 95 | THREE.Projector = function () {
 96 | 
 97 | 	var _object, _objectCount, _objectPool = [], _objectPoolLength = 0,
 98 | 	_vertex, _vertexCount, _vertexPool = [], _vertexPoolLength = 0,
 99 | 	_face, _faceCount, _facePool = [], _facePoolLength = 0,
100 | 	_line, _lineCount, _linePool = [], _linePoolLength = 0,
101 | 	_sprite, _spriteCount, _spritePool = [], _spritePoolLength = 0,
102 | 
103 | 	_renderData = { objects: [], lights: [], elements: [] },
104 | 
105 | 	_vA = new THREE.Vector3(),
106 | 	_vB = new THREE.Vector3(),
107 | 	_vC = new THREE.Vector3(),
108 | 
109 | 	_vector3 = new THREE.Vector3(),
110 | 	_vector4 = new THREE.Vector4(),
111 | 
112 | 	_clipBox = new THREE.Box3( new THREE.Vector3( - 1, - 1, - 1 ), new THREE.Vector3( 1, 1, 1 ) ),
113 | 	_boundingBox = new THREE.Box3(),
114 | 	_points3 = new Array( 3 ),
115 | 	_points4 = new Array( 4 ),
116 | 
117 | 	_viewMatrix = new THREE.Matrix4(),
118 | 	_viewProjectionMatrix = new THREE.Matrix4(),
119 | 
120 | 	_modelMatrix,
121 | 	_modelViewProjectionMatrix = new THREE.Matrix4(),
122 | 
123 | 	_normalMatrix = new THREE.Matrix3(),
124 | 
125 | 	_frustum = new THREE.Frustum(),
126 | 
127 | 	_clippedVertex1PositionScreen = new THREE.Vector4(),
128 | 	_clippedVertex2PositionScreen = new THREE.Vector4();
129 | 	
130 | 	//
131 | 
132 | 	this.projectVector = function ( vector, camera ) {
133 | 
134 | 		console.warn( 'THREE.Projector: .projectVector() is now vector.project().' );
135 | 		vector.project( camera );
136 | 
137 | 	};
138 | 
139 | 	this.unprojectVector = function ( vector, camera ) {
140 | 
141 | 		console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' );
142 | 		vector.unproject( camera );
143 | 
144 | 	};
145 | 
146 | 	this.pickingRay = function ( vector, camera ) {
147 | 
148 | 		console.error( 'THREE.Projector: .pickingRay() has been removed.' );
149 | 
150 | 	};
151 | 	
152 | 	//
153 | 
154 | 	var RenderList = function () {
155 | 
156 | 		var normals = [];
157 | 		var uvs = [];
158 | 
159 | 		var object = null;
160 | 		var material = null;
161 | 
162 | 		var normalMatrix = new THREE.Matrix3();
163 | 
164 | 		var setObject = function ( value ) {
165 | 
166 | 			object = value;
167 | 			material = object.material;
168 | 
169 | 			normalMatrix.getNormalMatrix( object.matrixWorld );
170 | 
171 | 			normals.length = 0;
172 | 			uvs.length = 0;
173 | 
174 | 		};
175 | 
176 | 		var projectVertex = function ( vertex ) {
177 | 
178 | 			var position = vertex.position;
179 | 			var positionWorld = vertex.positionWorld;
180 | 			var positionScreen = vertex.positionScreen;
181 | 
182 | 			positionWorld.copy( position ).applyMatrix4( _modelMatrix );
183 | 			positionScreen.copy( positionWorld ).applyMatrix4( _viewProjectionMatrix );
184 | 
185 | 			var invW = 1 / positionScreen.w;
186 | 
187 | 			positionScreen.x *= invW;
188 | 			positionScreen.y *= invW;
189 | 			positionScreen.z *= invW;
190 | 
191 | 			vertex.visible = positionScreen.x >= - 1 && positionScreen.x <= 1 &&
192 | 					 positionScreen.y >= - 1 && positionScreen.y <= 1 &&
193 | 					 positionScreen.z >= - 1 && positionScreen.z <= 1;
194 | 
195 | 		};
196 | 
197 | 		var pushVertex = function ( x, y, z ) {
198 | 
199 | 			_vertex = getNextVertexInPool();
200 | 			_vertex.position.set( x, y, z );
201 | 
202 | 			projectVertex( _vertex );
203 | 
204 | 		};
205 | 
206 | 		var pushNormal = function ( x, y, z ) {
207 | 
208 | 			normals.push( x, y, z );
209 | 
210 | 		};
211 | 
212 | 		var pushUv = function ( x, y ) {
213 | 
214 | 			uvs.push( x, y );
215 | 
216 | 		};
217 | 
218 | 		var checkTriangleVisibility = function ( v1, v2, v3 ) {
219 | 
220 | 			if ( v1.visible === true || v2.visible === true || v3.visible === true ) return true;
221 | 
222 | 			_points3[ 0 ] = v1.positionScreen;
223 | 			_points3[ 1 ] = v2.positionScreen;
224 | 			_points3[ 2 ] = v3.positionScreen;
225 | 
226 | 			return _clipBox.isIntersectionBox( _boundingBox.setFromPoints( _points3 ) );
227 | 
228 | 		};
229 | 
230 | 		var checkBackfaceCulling = function ( v1, v2, v3 ) {
231 | 
232 | 			return ( ( v3.positionScreen.x - v1.positionScreen.x ) *
233 | 				    ( v2.positionScreen.y - v1.positionScreen.y ) -
234 | 				    ( v3.positionScreen.y - v1.positionScreen.y ) *
235 | 				    ( v2.positionScreen.x - v1.positionScreen.x ) ) < 0;
236 | 
237 | 		};
238 | 
239 | 		var pushLine = function ( a, b ) {
240 | 
241 | 			var v1 = _vertexPool[ a ];
242 | 			var v2 = _vertexPool[ b ];
243 | 
244 | 			_line = getNextLineInPool();
245 | 
246 | 			_line.id = object.id;
247 | 			_line.v1.copy( v1 );
248 | 			_line.v2.copy( v2 );
249 | 			_line.z = ( v1.positionScreen.z + v2.positionScreen.z ) / 2;
250 | 
251 | 			_line.material = object.material;
252 | 
253 | 			_renderData.elements.push( _line );
254 | 
255 | 		};
256 | 
257 | 		var pushTriangle = function ( a, b, c ) {
258 | 
259 | 			var v1 = _vertexPool[ a ];
260 | 			var v2 = _vertexPool[ b ];
261 | 			var v3 = _vertexPool[ c ];
262 | 
263 | 			if ( checkTriangleVisibility( v1, v2, v3 ) === false ) return;
264 | 
265 | 			if ( material.side === THREE.DoubleSide || checkBackfaceCulling( v1, v2, v3 ) === true ) {
266 | 
267 | 				_face = getNextFaceInPool();
268 | 
269 | 				_face.id = object.id;
270 | 				_face.v1.copy( v1 );
271 | 				_face.v2.copy( v2 );
272 | 				_face.v3.copy( v3 );
273 | 				_face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3;
274 | 
275 | 				for ( var i = 0; i < 3; i ++ ) {
276 | 
277 | 					var offset = arguments[ i ] * 3;
278 | 					var normal = _face.vertexNormalsModel[ i ];
279 | 
280 | 					normal.set( normals[ offset ], normals[ offset + 1 ], normals[ offset + 2 ] );
281 | 					normal.applyMatrix3( normalMatrix ).normalize();
282 | 
283 | 					var offset2 = arguments[ i ] * 2;
284 | 
285 | 					var uv = _face.uvs[ i ];
286 | 					uv.set( uvs[ offset2 ], uvs[ offset2 + 1 ] );
287 | 
288 | 				}
289 | 
290 | 				_face.vertexNormalsLength = 3;
291 | 
292 | 				_face.material = object.material;
293 | 
294 | 				_renderData.elements.push( _face );
295 | 
296 | 			}
297 | 
298 | 		};
299 | 
300 | 		return {
301 | 			setObject: setObject,
302 | 			projectVertex: projectVertex,
303 | 			checkTriangleVisibility: checkTriangleVisibility,
304 | 			checkBackfaceCulling: checkBackfaceCulling,
305 | 			pushVertex: pushVertex,
306 | 			pushNormal: pushNormal,
307 | 			pushUv: pushUv,
308 | 			pushLine: pushLine,
309 | 			pushTriangle: pushTriangle
310 | 		}
311 | 
312 | 	};
313 | 
314 | 	var renderList = new RenderList();
315 | 
316 | 	this.projectScene = function ( scene, camera, sortObjects, sortElements ) {
317 | 
318 | 		_faceCount = 0;
319 | 		_lineCount = 0;
320 | 		_spriteCount = 0;
321 | 
322 | 		_renderData.elements.length = 0;
323 | 
324 | 		if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
325 | 		if ( camera.parent === undefined ) camera.updateMatrixWorld();
326 | 
327 | 		_viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) );
328 | 		_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
329 | 
330 | 		_frustum.setFromMatrix( _viewProjectionMatrix );
331 | 
332 | 		//
333 | 
334 | 		_objectCount = 0;
335 | 
336 | 		_renderData.objects.length = 0;
337 | 		_renderData.lights.length = 0;
338 | 
339 | 		scene.traverseVisible( function ( object ) {
340 | 
341 | 			if ( object instanceof THREE.Light ) {
342 | 
343 | 				_renderData.lights.push( object );
344 | 
345 | 			} else if ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Sprite ) {
346 | 
347 | 				if ( object.material.visible === false ) return;
348 | 
349 | 				if ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) {
350 | 
351 | 					_object = getNextObjectInPool();
352 | 					_object.id = object.id;
353 | 					_object.object = object;
354 | 
355 | 					if ( object.renderDepth !== null ) {
356 | 
357 | 						_object.z = object.renderDepth;
358 | 
359 | 					} else {
360 | 
361 | 						_vector3.setFromMatrixPosition( object.matrixWorld );
362 | 						_vector3.applyProjection( _viewProjectionMatrix );
363 | 						_object.z = _vector3.z;
364 | 
365 | 					}
366 | 
367 | 					_renderData.objects.push( _object );
368 | 
369 | 				}
370 | 
371 | 			}
372 | 
373 | 		} );
374 | 
375 | 		if ( sortObjects === true ) {
376 | 
377 | 			_renderData.objects.sort( painterSort );
378 | 
379 | 		}
380 | 
381 | 		//
382 | 
383 | 		for ( var o = 0, ol = _renderData.objects.length; o < ol; o ++ ) {
384 | 
385 | 			var object = _renderData.objects[ o ].object;
386 | 			var geometry = object.geometry;
387 | 
388 | 			renderList.setObject( object );
389 | 
390 | 			_modelMatrix = object.matrixWorld;
391 | 
392 | 			_vertexCount = 0;
393 | 
394 | 			if ( object instanceof THREE.Mesh ) {
395 | 
396 | 				if ( geometry instanceof THREE.BufferGeometry ) {
397 | 
398 | 					var attributes = geometry.attributes;
399 | 					var offsets = geometry.offsets;
400 | 
401 | 					if ( attributes.position === undefined ) continue;
402 | 
403 | 					var positions = attributes.position.array;
404 | 
405 | 					for ( var i = 0, l = positions.length; i < l; i += 3 ) {
406 | 
407 | 						renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
408 | 
409 | 					}
410 | 
411 | 					if ( attributes.normal !== undefined ) {
412 | 
413 | 						var normals = attributes.normal.array;
414 | 
415 | 						for ( var i = 0, l = normals.length; i < l; i += 3 ) {
416 | 
417 | 							renderList.pushNormal( normals[ i ], normals[ i + 1 ], normals[ i + 2 ] );
418 | 
419 | 						}
420 | 
421 | 					}
422 | 
423 | 					if ( attributes.uv !== undefined ) {
424 | 
425 | 						var uvs = attributes.uv.array;
426 | 
427 | 						for ( var i = 0, l = uvs.length; i < l; i += 2 ) {
428 | 
429 | 							renderList.pushUv( uvs[ i ], uvs[ i + 1 ] );
430 | 
431 | 						}
432 | 
433 | 					}
434 | 
435 | 					if ( attributes.index !== undefined ) {
436 | 
437 | 						var indices = attributes.index.array;
438 | 
439 | 						if ( offsets.length > 0 ) {
440 | 
441 | 							for ( var o = 0; o < offsets.length; o ++ ) {
442 | 
443 | 								var offset = offsets[ o ];
444 | 								var index = offset.index;
445 | 
446 | 								for ( var i = offset.start, l = offset.start + offset.count; i < l; i += 3 ) {
447 | 
448 | 									renderList.pushTriangle( indices[ i ] + index, indices[ i + 1 ] + index, indices[ i + 2 ] + index );
449 | 
450 | 								}
451 | 
452 | 							}
453 | 
454 | 						} else {
455 | 
456 | 							for ( var i = 0, l = indices.length; i < l; i += 3 ) {
457 | 
458 | 								renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] );
459 | 
460 | 							}
461 | 
462 | 						}
463 | 
464 | 					} else {
465 | 
466 | 						for ( var i = 0, l = positions.length / 3; i < l; i += 3 ) {
467 | 
468 | 							renderList.pushTriangle( i, i + 1, i + 2 );
469 | 
470 | 						}
471 | 
472 | 					}
473 | 
474 | 				} else if ( geometry instanceof THREE.Geometry ) {
475 | 
476 | 					var vertices = geometry.vertices;
477 | 					var faces = geometry.faces;
478 | 					var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
479 | 
480 | 					_normalMatrix.getNormalMatrix( _modelMatrix );
481 | 
482 | 					var isFaceMaterial = object.material instanceof THREE.MeshFaceMaterial;
483 | 					var objectMaterials = isFaceMaterial === true ? object.material : null;
484 | 
485 | 					for ( var v = 0, vl = vertices.length; v < vl; v ++ ) {
486 | 
487 | 						var vertex = vertices[ v ];
488 | 						renderList.pushVertex( vertex.x, vertex.y, vertex.z );
489 | 
490 | 					}
491 | 
492 | 					for ( var f = 0, fl = faces.length; f < fl; f ++ ) {
493 | 
494 | 						var face = faces[ f ];
495 | 
496 | 						var material = isFaceMaterial === true
497 | 							 ? objectMaterials.materials[ face.materialIndex ]
498 | 							 : object.material;
499 | 
500 | 						if ( material === undefined ) continue;
501 | 
502 | 						var side = material.side;
503 | 
504 | 						var v1 = _vertexPool[ face.a ];
505 | 						var v2 = _vertexPool[ face.b ];
506 | 						var v3 = _vertexPool[ face.c ];
507 | 
508 | 						if ( material.morphTargets === true ) {
509 | 
510 | 							var morphTargets = geometry.morphTargets;
511 | 							var morphInfluences = object.morphTargetInfluences;
512 | 
513 | 							var v1p = v1.position;
514 | 							var v2p = v2.position;
515 | 							var v3p = v3.position;
516 | 
517 | 							_vA.set( 0, 0, 0 );
518 | 							_vB.set( 0, 0, 0 );
519 | 							_vC.set( 0, 0, 0 );
520 | 
521 | 							for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {
522 | 
523 | 								var influence = morphInfluences[ t ];
524 | 
525 | 								if ( influence === 0 ) continue;
526 | 
527 | 								var targets = morphTargets[ t ].vertices;
528 | 
529 | 								_vA.x += ( targets[ face.a ].x - v1p.x ) * influence;
530 | 								_vA.y += ( targets[ face.a ].y - v1p.y ) * influence;
531 | 								_vA.z += ( targets[ face.a ].z - v1p.z ) * influence;
532 | 
533 | 								_vB.x += ( targets[ face.b ].x - v2p.x ) * influence;
534 | 								_vB.y += ( targets[ face.b ].y - v2p.y ) * influence;
535 | 								_vB.z += ( targets[ face.b ].z - v2p.z ) * influence;
536 | 
537 | 								_vC.x += ( targets[ face.c ].x - v3p.x ) * influence;
538 | 								_vC.y += ( targets[ face.c ].y - v3p.y ) * influence;
539 | 								_vC.z += ( targets[ face.c ].z - v3p.z ) * influence;
540 | 
541 | 							}
542 | 
543 | 							v1.position.add( _vA );
544 | 							v2.position.add( _vB );
545 | 							v3.position.add( _vC );
546 | 
547 | 							renderList.projectVertex( v1 );
548 | 							renderList.projectVertex( v2 );
549 | 							renderList.projectVertex( v3 );
550 | 
551 | 						}
552 | 
553 | 						if ( renderList.checkTriangleVisibility( v1, v2, v3 ) === false ) continue;
554 | 
555 | 						var visible = renderList.checkBackfaceCulling( v1, v2, v3 );
556 | 
557 | 						if ( side !== THREE.DoubleSide ) {
558 | 							if ( side === THREE.FrontSide && visible === false ) continue;
559 | 							if ( side === THREE.BackSide && visible === true ) continue;
560 | 						}
561 | 
562 | 						_face = getNextFaceInPool();
563 | 
564 | 						_face.id = object.id;
565 | 						_face.v1.copy( v1 );
566 | 						_face.v2.copy( v2 );
567 | 						_face.v3.copy( v3 );
568 | 
569 | 						_face.normalModel.copy( face.normal );
570 | 
571 | 						if ( visible === false && ( side === THREE.BackSide || side === THREE.DoubleSide ) ) {
572 | 
573 | 							_face.normalModel.negate();
574 | 
575 | 						}
576 | 
577 | 						_face.normalModel.applyMatrix3( _normalMatrix ).normalize();
578 | 
579 | 						var faceVertexNormals = face.vertexNormals;
580 | 
581 | 						for ( var n = 0, nl = Math.min( faceVertexNormals.length, 3 ); n < nl; n ++ ) {
582 | 
583 | 							var normalModel = _face.vertexNormalsModel[ n ];
584 | 							normalModel.copy( faceVertexNormals[ n ] );
585 | 
586 | 							if ( visible === false && ( side === THREE.BackSide || side === THREE.DoubleSide ) ) {
587 | 
588 | 								normalModel.negate();
589 | 
590 | 							}
591 | 
592 | 							normalModel.applyMatrix3( _normalMatrix ).normalize();
593 | 
594 | 						}
595 | 
596 | 						_face.vertexNormalsLength = faceVertexNormals.length;
597 | 
598 | 						var vertexUvs = faceVertexUvs[ f ];
599 | 
600 | 						if ( vertexUvs !== undefined ) {
601 | 
602 | 							for ( var u = 0; u < 3; u ++ ) {
603 | 
604 | 								_face.uvs[ u ].copy( vertexUvs[ u ] );
605 | 
606 | 							}
607 | 
608 | 						}
609 | 
610 | 						_face.color = face.color;
611 | 						_face.material = material;
612 | 
613 | 						_face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3;
614 | 
615 | 						_renderData.elements.push( _face );
616 | 
617 | 					}
618 | 
619 | 				}
620 | 
621 | 			} else if ( object instanceof THREE.Line ) {
622 | 
623 | 				if ( geometry instanceof THREE.BufferGeometry ) {
624 | 
625 | 					var attributes = geometry.attributes;
626 | 
627 | 					if ( attributes.position !== undefined ) {
628 | 
629 | 						var positions = attributes.position.array;
630 | 
631 | 						for ( var i = 0, l = positions.length; i < l; i += 3 ) {
632 | 
633 | 							renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
634 | 
635 | 						}
636 | 
637 | 						if ( attributes.index !== undefined ) {
638 | 
639 | 							var indices = attributes.index.array;
640 | 
641 | 							for ( var i = 0, l = indices.length; i < l; i += 2 ) {
642 | 
643 | 								renderList.pushLine( indices[ i ], indices[ i + 1 ] );
644 | 
645 | 							}
646 | 
647 | 						} else {
648 | 
649 | 							var step = object.mode === THREE.LinePieces ? 2 : 1;
650 | 
651 | 							for ( var i = 0, l = ( positions.length / 3 ) - 1; i < l; i += step ) {
652 | 
653 | 								renderList.pushLine( i, i + 1 );
654 | 
655 | 							}
656 | 
657 | 						}
658 | 
659 | 					}
660 | 
661 | 				} else if ( geometry instanceof THREE.Geometry ) {
662 | 
663 | 					_modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix );
664 | 
665 | 					var vertices = object.geometry.vertices;
666 | 
667 | 					if ( vertices.length === 0 ) continue;
668 | 
669 | 					v1 = getNextVertexInPool();
670 | 					v1.positionScreen.copy( vertices[ 0 ] ).applyMatrix4( _modelViewProjectionMatrix );
671 | 
672 | 					// Handle LineStrip and LinePieces
673 | 					var step = object.mode === THREE.LinePieces ? 2 : 1;
674 | 
675 | 					for ( var v = 1, vl = vertices.length; v < vl; v ++ ) {
676 | 
677 | 						v1 = getNextVertexInPool();
678 | 						v1.positionScreen.copy( vertices[ v ] ).applyMatrix4( _modelViewProjectionMatrix );
679 | 
680 | 						if ( ( v + 1 ) % step > 0 ) continue;
681 | 
682 | 						v2 = _vertexPool[ _vertexCount - 2 ];
683 | 
684 | 						_clippedVertex1PositionScreen.copy( v1.positionScreen );
685 | 						_clippedVertex2PositionScreen.copy( v2.positionScreen );
686 | 
687 | 						if ( clipLine( _clippedVertex1PositionScreen, _clippedVertex2PositionScreen ) === true ) {
688 | 
689 | 							// Perform the perspective divide
690 | 							_clippedVertex1PositionScreen.multiplyScalar( 1 / _clippedVertex1PositionScreen.w );
691 | 							_clippedVertex2PositionScreen.multiplyScalar( 1 / _clippedVertex2PositionScreen.w );
692 | 
693 | 							_line = getNextLineInPool();
694 | 
695 | 							_line.id = object.id;
696 | 							_line.v1.positionScreen.copy( _clippedVertex1PositionScreen );
697 | 							_line.v2.positionScreen.copy( _clippedVertex2PositionScreen );
698 | 
699 | 							_line.z = Math.max( _clippedVertex1PositionScreen.z, _clippedVertex2PositionScreen.z );
700 | 
701 | 							_line.material = object.material;
702 | 
703 | 							if ( object.material.vertexColors === THREE.VertexColors ) {
704 | 
705 | 								_line.vertexColors[ 0 ].copy( object.geometry.colors[ v ] );
706 | 								_line.vertexColors[ 1 ].copy( object.geometry.colors[ v - 1 ] );
707 | 
708 | 							}
709 | 
710 | 							_renderData.elements.push( _line );
711 | 
712 | 						}
713 | 
714 | 					}
715 | 
716 | 				}
717 | 
718 | 			} else if ( object instanceof THREE.Sprite ) {
719 | 
720 | 				_vector4.set( _modelMatrix.elements[ 12 ], _modelMatrix.elements[ 13 ], _modelMatrix.elements[ 14 ], 1 );
721 | 				_vector4.applyMatrix4( _viewProjectionMatrix );
722 | 
723 | 				var invW = 1 / _vector4.w;
724 | 
725 | 				_vector4.z *= invW;
726 | 
727 | 				if ( _vector4.z >= - 1 && _vector4.z <= 1 ) {
728 | 
729 | 					_sprite = getNextSpriteInPool();
730 | 					_sprite.id = object.id;
731 | 					_sprite.x = _vector4.x * invW;
732 | 					_sprite.y = _vector4.y * invW;
733 | 					_sprite.z = _vector4.z;
734 | 					_sprite.object = object;
735 | 
736 | 					_sprite.rotation = object.rotation;
737 | 
738 | 					_sprite.scale.x = object.scale.x * Math.abs( _sprite.x - ( _vector4.x + camera.projectionMatrix.elements[ 0 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 12 ] ) );
739 | 					_sprite.scale.y = object.scale.y * Math.abs( _sprite.y - ( _vector4.y + camera.projectionMatrix.elements[ 5 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 13 ] ) );
740 | 
741 | 					_sprite.material = object.material;
742 | 
743 | 					_renderData.elements.push( _sprite );
744 | 
745 | 				}
746 | 
747 | 			}
748 | 
749 | 		}
750 | 
751 | 		if ( sortElements === true ) {
752 | 
753 | 			_renderData.elements.sort( painterSort );
754 | 
755 | 		}
756 | 
757 | 		return _renderData;
758 | 
759 | 	};
760 | 
761 | 	// Pools
762 | 
763 | 	function getNextObjectInPool() {
764 | 
765 | 		if ( _objectCount === _objectPoolLength ) {
766 | 
767 | 			var object = new THREE.RenderableObject();
768 | 			_objectPool.push( object );
769 | 			_objectPoolLength ++;
770 | 			_objectCount ++;
771 | 			return object;
772 | 
773 | 		}
774 | 
775 | 		return _objectPool[ _objectCount ++ ];
776 | 
777 | 	}
778 | 
779 | 	function getNextVertexInPool() {
780 | 
781 | 		if ( _vertexCount === _vertexPoolLength ) {
782 | 
783 | 			var vertex = new THREE.RenderableVertex();
784 | 			_vertexPool.push( vertex );
785 | 			_vertexPoolLength ++;
786 | 			_vertexCount ++;
787 | 			return vertex;
788 | 
789 | 		}
790 | 
791 | 		return _vertexPool[ _vertexCount ++ ];
792 | 
793 | 	}
794 | 
795 | 	function getNextFaceInPool() {
796 | 
797 | 		if ( _faceCount === _facePoolLength ) {
798 | 
799 | 			var face = new THREE.RenderableFace();
800 | 			_facePool.push( face );
801 | 			_facePoolLength ++;
802 | 			_faceCount ++;
803 | 			return face;
804 | 
805 | 		}
806 | 
807 | 		return _facePool[ _faceCount ++ ];
808 | 
809 | 
810 | 	}
811 | 
812 | 	function getNextLineInPool() {
813 | 
814 | 		if ( _lineCount === _linePoolLength ) {
815 | 
816 | 			var line = new THREE.RenderableLine();
817 | 			_linePool.push( line );
818 | 			_linePoolLength ++;
819 | 			_lineCount ++
820 | 			return line;
821 | 
822 | 		}
823 | 
824 | 		return _linePool[ _lineCount ++ ];
825 | 
826 | 	}
827 | 
828 | 	function getNextSpriteInPool() {
829 | 
830 | 		if ( _spriteCount === _spritePoolLength ) {
831 | 
832 | 			var sprite = new THREE.RenderableSprite();
833 | 			_spritePool.push( sprite );
834 | 			_spritePoolLength ++;
835 | 			_spriteCount ++
836 | 			return sprite;
837 | 
838 | 		}
839 | 
840 | 		return _spritePool[ _spriteCount ++ ];
841 | 
842 | 	}
843 | 
844 | 	//
845 | 
846 | 	function painterSort( a, b ) {
847 | 
848 | 		if ( a.z !== b.z ) {
849 | 
850 | 			return b.z - a.z;
851 | 
852 | 		} else if ( a.id !== b.id ) {
853 | 
854 | 			return a.id - b.id;
855 | 
856 | 		} else {
857 | 
858 | 			return 0;
859 | 
860 | 		}
861 | 
862 | 	}
863 | 
864 | 	function clipLine( s1, s2 ) {
865 | 
866 | 		var alpha1 = 0, alpha2 = 1,
867 | 
868 | 		// Calculate the boundary coordinate of each vertex for the near and far clip planes,
869 | 		// Z = -1 and Z = +1, respectively.
870 | 		bc1near =  s1.z + s1.w,
871 | 		bc2near =  s2.z + s2.w,
872 | 		bc1far =  - s1.z + s1.w,
873 | 		bc2far =  - s2.z + s2.w;
874 | 
875 | 		if ( bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0 ) {
876 | 
877 | 			// Both vertices lie entirely within all clip planes.
878 | 			return true;
879 | 
880 | 		} else if ( ( bc1near < 0 && bc2near < 0 ) || ( bc1far < 0 && bc2far < 0 ) ) {
881 | 
882 | 			// Both vertices lie entirely outside one of the clip planes.
883 | 			return false;
884 | 
885 | 		} else {
886 | 
887 | 			// The line segment spans at least one clip plane.
888 | 
889 | 			if ( bc1near < 0 ) {
890 | 
891 | 				// v1 lies outside the near plane, v2 inside
892 | 				alpha1 = Math.max( alpha1, bc1near / ( bc1near - bc2near ) );
893 | 
894 | 			} else if ( bc2near < 0 ) {
895 | 
896 | 				// v2 lies outside the near plane, v1 inside
897 | 				alpha2 = Math.min( alpha2, bc1near / ( bc1near - bc2near ) );
898 | 
899 | 			}
900 | 
901 | 			if ( bc1far < 0 ) {
902 | 
903 | 				// v1 lies outside the far plane, v2 inside
904 | 				alpha1 = Math.max( alpha1, bc1far / ( bc1far - bc2far ) );
905 | 
906 | 			} else if ( bc2far < 0 ) {
907 | 
908 | 				// v2 lies outside the far plane, v2 inside
909 | 				alpha2 = Math.min( alpha2, bc1far / ( bc1far - bc2far ) );
910 | 
911 | 			}
912 | 
913 | 			if ( alpha2 < alpha1 ) {
914 | 
915 | 				// The line segment spans two boundaries, but is outside both of them.
916 | 				// (This can't happen when we're only clipping against just near/far but good
917 | 				//  to leave the check here for future usage if other clip planes are added.)
918 | 				return false;
919 | 
920 | 			} else {
921 | 
922 | 				// Update the s1 and s2 vertices to match the clipped line segment.
923 | 				s1.lerp( s2, alpha1 );
924 | 				s2.lerp( s1, 1 - alpha2 );
925 | 
926 | 				return true;
927 | 
928 | 			}
929 | 
930 | 		}
931 | 
932 | 	}
933 | 
934 | };
935 | 


--------------------------------------------------------------------------------
/libs/RenderPass.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author alteredq / http://alteredqualia.com/
 3 |  */
 4 | 
 5 | THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
 6 | 
 7 | 	this.scene = scene;
 8 | 	this.camera = camera;
 9 | 
10 | 	this.overrideMaterial = overrideMaterial;
11 | 
12 | 	this.clearColor = clearColor;
13 | 	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
14 | 
15 | 	this.oldClearColor = new THREE.Color();
16 | 	this.oldClearAlpha = 1;
17 | 
18 | 	this.enabled = true;
19 | 	this.clear = true;
20 | 	this.needsSwap = false;
21 | 
22 | };
23 | 
24 | THREE.RenderPass.prototype = {
25 | 
26 | 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
27 | 
28 | 		this.scene.overrideMaterial = this.overrideMaterial;
29 | 
30 | 		if ( this.clearColor ) {
31 | 
32 | 			this.oldClearColor.copy( renderer.getClearColor() );
33 | 			this.oldClearAlpha = renderer.getClearAlpha();
34 | 
35 | 			renderer.setClearColor( this.clearColor, this.clearAlpha );
36 | 
37 | 		}
38 | 
39 | 		renderer.render( this.scene, this.camera, readBuffer, this.clear );
40 | 
41 | 		if ( this.clearColor ) {
42 | 
43 | 			renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
44 | 
45 | 		}
46 | 
47 | 		this.scene.overrideMaterial = null;
48 | 
49 | 	}
50 | 
51 | };
52 | 


--------------------------------------------------------------------------------
/libs/ShaderDeferred.js:
--------------------------------------------------------------------------------
   1 | /**
   2 |  * @author alteredq / http://alteredqualia.com/
   3 |  * @author MPanknin / http://www.redplant.de/
   4 |  * @author benaadams / http://blog.illyriad.co.uk/
   5 |  *
   6 |  */
   7 | 
   8 | 
   9 | THREE.DeferredShaderChunk = {
  10 | 
  11 | 	// decode float to vec3
  12 | 
  13 | 	unpackFloat: [
  14 | 
  15 | 		"vec3 float_to_vec3( float data ) {",
  16 | 
  17 | 			"vec3 uncompressed;",
  18 | 			"uncompressed.x = fract( data );",
  19 | 			"float zInt = floor( data / 255.0 );",
  20 | 			"uncompressed.z = fract( zInt / 255.0 );",
  21 | 			"uncompressed.y = fract( floor( data - ( zInt * 255.0 ) ) / 255.0 );",
  22 | 			"return uncompressed;",
  23 | 
  24 | 		"}"
  25 | 
  26 | 	].join("\n"),
  27 | 
  28 | 	computeVertexPositionVS: [
  29 | 
  30 | 		"vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );",
  31 | 
  32 | 		"vec4 normalDepth = texture2D( samplerNormalDepth, texCoord );",
  33 | 		"float z = normalDepth.w;",
  34 | 
  35 | 		"if ( z == 0.0 ) discard;",
  36 | 
  37 | 		"vec2 xy = texCoord * 2.0 - 1.0;",
  38 | 
  39 | 		"vec4 vertexPositionProjected = vec4( xy, z, 1.0 );",
  40 | 		"vec4 vertexPositionVS = matProjInverse * vertexPositionProjected;",
  41 | 		"vertexPositionVS.xyz /= vertexPositionVS.w;",
  42 | 		"vertexPositionVS.w = 1.0;"
  43 | 
  44 | 	].join("\n"),
  45 | 
  46 | 	computeNormal: [
  47 | 
  48 | 		"vec3 normal = normalDepth.xyz * 2.0 - 1.0;"
  49 | 
  50 | 	].join("\n"),
  51 | 
  52 | 	unpackColorMap: [
  53 | 
  54 | 		"vec4 colorMap = texture2D( samplerColor, texCoord );",
  55 | 
  56 | 		"vec3 albedo = float_to_vec3( abs( colorMap.x ) );",
  57 | 		"vec3 specularColor = float_to_vec3( abs( colorMap.y ) );",
  58 | 		"float shininess = abs( colorMap.z );",
  59 | 		"float wrapAround = sign( colorMap.z );",
  60 | 		"float additiveSpecular = sign( colorMap.y );"
  61 | 
  62 | 	].join("\n"),
  63 | 
  64 | 	computeDiffuse: [
  65 | 
  66 | 		"float dotProduct = dot( normal, lightVector );",
  67 | 		"float diffuseFull = max( dotProduct, 0.0 );",
  68 | 
  69 | 		"vec3 diffuse;",
  70 | 
  71 | 		"if ( wrapAround < 0.0 ) {",
  72 | 
  73 | 			// wrap around lighting
  74 | 
  75 | 			"float diffuseHalf = max( 0.5 * dotProduct + 0.5, 0.0 );",
  76 | 
  77 | 			"const vec3 wrapRGB = vec3( 1.0, 1.0, 1.0 );",
  78 | 			"diffuse = mix( vec3( diffuseFull ), vec3( diffuseHalf ), wrapRGB );",
  79 | 
  80 | 		"} else {",
  81 | 
  82 | 			// simple lighting
  83 | 
  84 | 			"diffuse = vec3( diffuseFull );",
  85 | 
  86 | 		"}"
  87 | 
  88 | 	].join("\n"),
  89 | 
  90 | 	computeSpecular: [
  91 | 
  92 | 		"vec3 halfVector = normalize( lightVector - normalize( vertexPositionVS.xyz ) );",
  93 | 		"float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );",
  94 | 
  95 | 		// simple specular
  96 | 
  97 | 		//"vec3 specular = specularColor * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse;",
  98 | 
  99 | 		// physically based specular
 100 | 
 101 | 		"float specularNormalization = ( shininess + 2.0001 ) / 8.0;",
 102 | 
 103 | 		"vec3 schlick = specularColor + vec3( 1.0 - specularColor ) * pow( 1.0 - dot( lightVector, halfVector ), 5.0 );",
 104 | 		"vec3 specular = schlick * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse * specularNormalization;"
 105 | 
 106 | 	].join("\n"),
 107 | 
 108 | 	combine: [
 109 | 
 110 | 		"vec3 light = lightIntensity * lightColor;",
 111 | 		"gl_FragColor = vec4( light * ( albedo * diffuse + specular ), attenuation );"
 112 | 
 113 | 	].join("\n")
 114 | 
 115 | };
 116 | 
 117 | THREE.ShaderDeferred = {
 118 | 
 119 | 	"color" : {
 120 | 
 121 | 		uniforms: THREE.UniformsUtils.merge( [
 122 | 
 123 | 			THREE.UniformsLib[ "common" ],
 124 | 			THREE.UniformsLib[ "fog" ],
 125 | 			THREE.UniformsLib[ "shadowmap" ],
 126 | 
 127 | 			{
 128 | 				"emissive" :  { type: "c", value: new THREE.Color( 0x000000 ) },
 129 | 				"specular" :  { type: "c", value: new THREE.Color( 0x111111 ) },
 130 | 				"shininess":  { type: "f", value: 30 },
 131 | 				"wrapAround": 		{ type: "f", value: 1 },
 132 | 				"additiveSpecular": { type: "f", value: 1 },
 133 | 
 134 | 				"samplerNormalDepth": { type: "t", value: null },
 135 | 				"viewWidth": 		{ type: "f", value: 800 },
 136 | 				"viewHeight": 		{ type: "f", value: 600 }
 137 | 			}
 138 | 
 139 | 		] ),
 140 | 
 141 | 		fragmentShader : [
 142 | 
 143 | 			"uniform vec3 diffuse;",
 144 | 			"uniform vec3 specular;",
 145 | 			"uniform vec3 emissive;",
 146 | 			"uniform float shininess;",
 147 | 			"uniform float wrapAround;",
 148 | 			"uniform float additiveSpecular;",
 149 | 
 150 | 			THREE.ShaderChunk[ "color_pars_fragment" ],
 151 | 			THREE.ShaderChunk[ "map_pars_fragment" ],
 152 | 			THREE.ShaderChunk[ "lightmap_pars_fragment" ],
 153 | 
 154 | 			"#ifdef USE_ENVMAP",
 155 | 
 156 | 				"varying vec3 vWorldPosition;",
 157 | 
 158 | 				"uniform float reflectivity;",
 159 | 				"uniform samplerCube envMap;",
 160 | 				"uniform float flipEnvMap;",
 161 | 				"uniform int combine;",
 162 | 
 163 | 				"uniform bool useRefract;",
 164 | 				"uniform float refractionRatio;",
 165 | 
 166 | 				"uniform sampler2D samplerNormalDepth;",
 167 | 				"uniform float viewHeight;",
 168 | 				"uniform float viewWidth;",
 169 | 
 170 | 			"#endif",
 171 | 
 172 | 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 173 | 			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
 174 | 			THREE.ShaderChunk[ "specularmap_pars_fragment" ],
 175 | 
 176 | 			"const float unit = 255.0/256.0;",
 177 | 
 178 | 			"float vec3_to_float( vec3 data ) {",
 179 | 
 180 | 				"highp float compressed = fract( data.x * unit ) + floor( data.y * unit * 255.0 ) + floor( data.z * unit * 255.0 ) * 255.0;",
 181 | 				"return compressed;",
 182 | 
 183 | 			"}",
 184 | 
 185 | 			"void main() {",
 186 | 
 187 | 				"const float opacity = 1.0;",
 188 | 
 189 | 				"gl_FragColor = vec4( diffuse, opacity );",
 190 | 
 191 | 				THREE.ShaderChunk[ "map_fragment" ],
 192 | 				THREE.ShaderChunk[ "alphatest_fragment" ],
 193 | 				THREE.ShaderChunk[ "specularmap_fragment" ],
 194 | 				THREE.ShaderChunk[ "lightmap_fragment" ],
 195 | 				THREE.ShaderChunk[ "color_fragment" ],
 196 | 
 197 | 				"#ifdef USE_ENVMAP",
 198 | 
 199 | 					"vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );",
 200 | 					"vec4 normalDepth = texture2D( samplerNormalDepth, texCoord );",
 201 | 					"vec3 normal = normalDepth.xyz * 2.0 - 1.0;",
 202 | 
 203 | 					"vec3 reflectVec;",
 204 | 
 205 | 					"vec3 cameraToVertex = normalize( vWorldPosition - cameraPosition );",
 206 | 
 207 | 					"if ( useRefract ) {",
 208 | 
 209 | 						"reflectVec = refract( cameraToVertex, normal, refractionRatio );",
 210 | 
 211 | 					"} else { ",
 212 | 
 213 | 						"reflectVec = reflect( cameraToVertex, normal );",
 214 | 
 215 | 					"}",
 216 | 
 217 | 					"#ifdef DOUBLE_SIDED",
 218 | 
 219 | 						"float flipNormal = ( -1.0 + 2.0 * float( gl_FrontFacing ) );",
 220 | 						"vec4 cubeColor = textureCube( envMap, flipNormal * vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) );",
 221 | 
 222 | 					"#else",
 223 | 
 224 | 						"vec4 cubeColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) );",
 225 | 
 226 | 					"#endif",
 227 | 
 228 | 					"#ifdef GAMMA_INPUT",
 229 | 
 230 | 						"cubeColor.xyz *= cubeColor.xyz;",
 231 | 
 232 | 					"#endif",
 233 | 
 234 | 					"if ( combine == 1 ) {",
 235 | 
 236 | 						"gl_FragColor.xyz = mix( gl_FragColor.xyz, cubeColor.xyz, specularStrength * reflectivity );",
 237 | 
 238 | 					"} else if ( combine == 2 ) {",
 239 | 
 240 | 						"gl_FragColor.xyz += cubeColor.xyz * specularStrength * reflectivity;",
 241 | 
 242 | 					"} else {",
 243 | 
 244 | 						"gl_FragColor.xyz = mix( gl_FragColor.xyz, gl_FragColor.xyz * cubeColor.xyz, specularStrength * reflectivity );",
 245 | 
 246 | 					"}",
 247 | 
 248 | 				"#endif",
 249 | 
 250 | 				THREE.ShaderChunk[ "shadowmap_fragment" ],
 251 | 				THREE.ShaderChunk[ "fog_fragment" ],
 252 | 
 253 | 				//
 254 | 
 255 | 				"const float compressionScale = 0.999;",
 256 | 
 257 | 				//
 258 | 
 259 | 				"vec3 diffuseMapColor;",
 260 | 
 261 | 				"#ifdef USE_MAP",
 262 | 
 263 | 					"diffuseMapColor = texelColor.xyz;",
 264 | 
 265 | 				"#else",
 266 | 
 267 | 					"diffuseMapColor = vec3( 1.0 );",
 268 | 
 269 | 				"#endif",
 270 | 
 271 | 				// diffuse color
 272 | 
 273 | 				"gl_FragColor.x = vec3_to_float( compressionScale * gl_FragColor.xyz );",
 274 | 
 275 | 				// specular color
 276 | 
 277 | 				"if ( additiveSpecular < 0.0 ) {",
 278 | 
 279 | 					"gl_FragColor.y = vec3_to_float( compressionScale * specular );",
 280 | 
 281 | 				"} else {",
 282 | 
 283 | 					"gl_FragColor.y = vec3_to_float( compressionScale * specular * diffuseMapColor );",
 284 | 
 285 | 				"}",
 286 | 
 287 | 				"gl_FragColor.y *= additiveSpecular;",
 288 | 
 289 | 				// shininess
 290 | 
 291 | 				"gl_FragColor.z = wrapAround * shininess;",
 292 | 
 293 | 				// emissive color
 294 | 
 295 | 				"#ifdef USE_COLOR",
 296 | 
 297 | 					"gl_FragColor.w = vec3_to_float( compressionScale * emissive * diffuseMapColor * vColor );",
 298 | 
 299 | 				"#else",
 300 | 
 301 | 					"gl_FragColor.w = vec3_to_float( compressionScale * emissive * diffuseMapColor );",
 302 | 
 303 | 				"#endif",
 304 | 
 305 | 			"}"
 306 | 
 307 | 		].join("\n"),
 308 | 
 309 | 		vertexShader : [
 310 | 
 311 | 			THREE.ShaderChunk[ "map_pars_vertex" ],
 312 | 			THREE.ShaderChunk[ "lightmap_pars_vertex" ],
 313 | 			THREE.ShaderChunk[ "color_pars_vertex" ],
 314 | 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 315 | 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 316 | 			THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
 317 | 
 318 | 			"#ifdef USE_ENVMAP",
 319 | 
 320 | 				"varying vec3 vWorldPosition;",
 321 | 
 322 | 			"#endif",
 323 | 
 324 | 			"void main() {",
 325 | 
 326 | 				THREE.ShaderChunk[ "map_vertex" ],
 327 | 				THREE.ShaderChunk[ "lightmap_vertex" ],
 328 | 				THREE.ShaderChunk[ "color_vertex" ],
 329 | 
 330 | 				THREE.ShaderChunk[ "skinbase_vertex" ],
 331 | 
 332 | 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 333 | 				THREE.ShaderChunk[ "skinning_vertex" ],
 334 | 				THREE.ShaderChunk[ "default_vertex" ],
 335 | 
 336 | 				THREE.ShaderChunk[ "worldpos_vertex" ],
 337 | 				THREE.ShaderChunk[ "shadowmap_vertex" ],
 338 | 
 339 | 				"#ifdef USE_ENVMAP",
 340 | 
 341 | 					"vWorldPosition = worldPosition.xyz;",
 342 | 
 343 | 				"#endif",
 344 | 
 345 | 			"}"
 346 | 
 347 | 		].join("\n")
 348 | 
 349 | 	},
 350 | 
 351 | 	"normalDepth" : {
 352 | 
 353 | 		uniforms: {
 354 | 
 355 | 			bumpMap: 	  { type: "t", value: null },
 356 | 			bumpScale:	  { type: "f", value: 1 },
 357 | 			offsetRepeat: { type: "v4", value: new THREE.Vector4( 0, 0, 1, 1 ) }
 358 | 
 359 | 		},
 360 | 
 361 | 		fragmentShader : [
 362 | 
 363 | 			"#ifdef USE_BUMPMAP",
 364 | 
 365 | 				"#extension GL_OES_standard_derivatives : enable\n",
 366 | 
 367 | 				"varying vec2 vUv;",
 368 | 				"varying vec3 vViewPosition;",
 369 | 
 370 | 				THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
 371 | 
 372 | 			"#endif",
 373 | 
 374 | 			"varying vec3 normalView;",
 375 | 			"varying vec4 clipPos;",
 376 | 
 377 | 			"void main() {",
 378 | 
 379 | 				"vec3 normal = normalize( normalView );",
 380 | 
 381 | 				"#ifdef USE_BUMPMAP",
 382 | 
 383 | 					"normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );",
 384 | 
 385 | 				"#endif",
 386 | 
 387 | 				"gl_FragColor.xyz = normal * 0.5 + 0.5;",
 388 | 				"gl_FragColor.w = clipPos.z / clipPos.w;",
 389 | 
 390 | 			"}"
 391 | 
 392 | 		].join("\n"),
 393 | 
 394 | 		vertexShader : [
 395 | 
 396 | 			"varying vec3 normalView;",
 397 | 			"varying vec4 clipPos;",
 398 | 
 399 | 			"#ifdef USE_BUMPMAP",
 400 | 
 401 | 				"varying vec2 vUv;",
 402 | 				"varying vec3 vViewPosition;",
 403 | 
 404 | 				"uniform vec4 offsetRepeat;",
 405 | 
 406 | 			"#endif",
 407 | 
 408 | 			THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
 409 | 			THREE.ShaderChunk[ "skinning_pars_vertex" ],
 410 | 
 411 | 			"void main() {",
 412 | 
 413 | 				THREE.ShaderChunk[ "morphnormal_vertex" ],
 414 | 				THREE.ShaderChunk[ "skinbase_vertex" ],
 415 | 				THREE.ShaderChunk[ "skinnormal_vertex" ],
 416 | 				THREE.ShaderChunk[ "defaultnormal_vertex" ],
 417 | 
 418 | 				THREE.ShaderChunk[ "morphtarget_vertex" ],
 419 | 				THREE.ShaderChunk[ "skinning_vertex" ],
 420 | 				THREE.ShaderChunk[ "default_vertex" ],
 421 | 
 422 | 				"normalView = normalize( normalMatrix * objectNormal );",
 423 | 
 424 | 				"#ifdef USE_BUMPMAP",
 425 | 
 426 | 					"vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",
 427 | 					"vViewPosition = -mvPosition.xyz;",
 428 | 
 429 | 				"#endif",
 430 | 
 431 | 				"clipPos = gl_Position;",
 432 | 
 433 | 			"}"
 434 | 
 435 | 		].join("\n")
 436 | 
 437 | 	},
 438 | 
 439 | 	"composite" : {
 440 | 
 441 | 		uniforms: {
 442 | 
 443 | 			samplerLight: 	{ type: "t", value: null },
 444 | 			brightness:		{ type: "f", value: 1 }
 445 | 
 446 | 		},
 447 | 
 448 | 		fragmentShader : [
 449 | 
 450 | 			"varying vec2 texCoord;",
 451 | 			"uniform sampler2D samplerLight;",
 452 | 			"uniform float brightness;",
 453 | 
 454 | 			// tonemapping operators
 455 | 			// based on John Hable's HLSL snippets
 456 | 			// from http://filmicgames.com/archives/75
 457 | 
 458 | 			"#ifdef TONEMAP_UNCHARTED",
 459 | 
 460 | 				"const float A = 0.15;",
 461 | 				"const float B = 0.50;",
 462 | 				"const float C = 0.10;",
 463 | 				"const float D = 0.20;",
 464 | 				"const float E = 0.02;",
 465 | 				"const float F = 0.30;",
 466 | 				"const float W = 11.2;",
 467 | 
 468 | 				"vec3 Uncharted2Tonemap( vec3 x ) {",
 469 | 
 470 | 				   "return ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;",
 471 | 
 472 | 				"}",
 473 | 
 474 | 			"#endif",
 475 | 
 476 | 			"void main() {",
 477 | 
 478 | 				"vec3 inColor = texture2D( samplerLight, texCoord ).xyz;",
 479 | 				"inColor *= brightness;",
 480 | 
 481 | 				"vec3 outColor;",
 482 | 
 483 | 				"#if defined( TONEMAP_SIMPLE )",
 484 | 
 485 | 					"outColor = sqrt( inColor );",
 486 | 
 487 | 				"#elif defined( TONEMAP_LINEAR )",
 488 | 
 489 | 					// simple linear to gamma conversion
 490 | 
 491 | 					"outColor = pow( inColor, vec3( 1.0 / 2.2 ) );",
 492 | 
 493 | 				"#elif defined( TONEMAP_REINHARD )",
 494 | 
 495 | 					// Reinhard operator
 496 | 
 497 | 					"inColor = inColor / ( 1.0 + inColor );",
 498 | 					"outColor = pow( inColor, vec3( 1.0 / 2.2 ) );",
 499 | 
 500 | 				"#elif defined( TONEMAP_FILMIC )",
 501 | 
 502 | 					// filmic operator by Jim Hejl and Richard Burgess-Dawson
 503 | 
 504 | 					"vec3 x = max( vec3( 0.0 ), inColor - 0.004 );",
 505 | 					"outColor = ( x * ( 6.2 * x + 0.5 ) ) / ( x * ( 6.2 * x + 1.7 ) + 0.06 );",
 506 | 
 507 | 				"#elif defined( TONEMAP_UNCHARTED )",
 508 | 
 509 | 					// tonemapping operator from Uncharted 2 by John Hable
 510 | 
 511 | 					"float ExposureBias = 2.0;",
 512 | 					"vec3 curr = Uncharted2Tonemap( ExposureBias * inColor );",
 513 | 
 514 | 					"vec3 whiteScale = vec3( 1.0 ) / Uncharted2Tonemap( vec3( W ) );",
 515 | 					"vec3 color = curr * whiteScale;",
 516 | 
 517 | 					"outColor = pow( color, vec3( 1.0 / 2.2 ) );",
 518 | 
 519 | 				"#else",
 520 | 
 521 | 					"outColor = inColor;",
 522 | 
 523 | 				"#endif",
 524 | 
 525 | 				"gl_FragColor = vec4( outColor, 1.0 );",
 526 | 
 527 | 			"}"
 528 | 
 529 | 		].join("\n"),
 530 | 
 531 | 		vertexShader : [
 532 | 
 533 | 			"varying vec2 texCoord;",
 534 | 
 535 | 			"void main() {",
 536 | 
 537 | 				"vec4 pos = vec4( sign( position.xy ), 0.0, 1.0 );",
 538 | 				"texCoord = pos.xy * vec2( 0.5 ) + 0.5;",
 539 | 				"gl_Position = pos;",
 540 | 
 541 | 			"}"
 542 | 
 543 | 		].join("\n")
 544 | 
 545 | 	},
 546 | 
 547 | 	"pointLight" : {
 548 | 
 549 | 		uniforms: {
 550 | 
 551 | 			samplerNormalDepth: { type: "t", value: null },
 552 | 			samplerColor: 		{ type: "t", value: null },
 553 | 			matProjInverse: { type: "m4", value: new THREE.Matrix4() },
 554 | 			viewWidth: 		{ type: "f", value: 800 },
 555 | 			viewHeight: 	{ type: "f", value: 600 },
 556 | 
 557 | 			lightPositionVS:{ type: "v3", value: new THREE.Vector3( 0, 0, 0 ) },
 558 | 			lightColor: 	{ type: "c", value: new THREE.Color( 0x000000 ) },
 559 | 			lightIntensity: { type: "f", value: 1.0 },
 560 | 			lightRadius: 	{ type: "f", value: 1.0 }
 561 | 
 562 | 		},
 563 | 
 564 | 		fragmentShader : [
 565 | 
 566 | 			"uniform sampler2D samplerColor;",
 567 | 			"uniform sampler2D samplerNormalDepth;",
 568 | 
 569 | 			"uniform float lightRadius;",
 570 | 			"uniform float lightIntensity;",
 571 | 			"uniform float viewHeight;",
 572 | 			"uniform float viewWidth;",
 573 | 
 574 | 			"uniform vec3 lightColor;",
 575 | 			"uniform vec3 lightPositionVS;",
 576 | 
 577 | 			"uniform mat4 matProjInverse;",
 578 | 
 579 | 			THREE.DeferredShaderChunk[ "unpackFloat" ],
 580 | 
 581 | 			"void main() {",
 582 | 
 583 | 				THREE.DeferredShaderChunk[ "computeVertexPositionVS" ],
 584 | 
 585 | 				// bail out early when pixel outside of light sphere
 586 | 
 587 | 				"vec3 lightVector = lightPositionVS - vertexPositionVS.xyz;",
 588 | 				"float distance = length( lightVector );",
 589 | 
 590 | 				"if ( distance > lightRadius ) discard;",
 591 | 
 592 | 				THREE.DeferredShaderChunk[ "computeNormal" ],
 593 | 				THREE.DeferredShaderChunk[ "unpackColorMap" ],
 594 | 
 595 | 				// compute light
 596 | 
 597 | 				"lightVector = normalize( lightVector );",
 598 | 
 599 | 				THREE.DeferredShaderChunk[ "computeDiffuse" ],
 600 | 				THREE.DeferredShaderChunk[ "computeSpecular" ],
 601 | 
 602 | 				// combine
 603 | 
 604 | 				"float cutoff = 0.3;",
 605 | 				"float denom = distance / lightRadius + 1.0;",
 606 | 				"float attenuation = 1.0 / ( denom * denom );",
 607 | 				"attenuation = ( attenuation - cutoff ) / ( 1.0 - cutoff );",
 608 | 				"attenuation = max( attenuation, 0.0 );",
 609 | 				"attenuation *= attenuation;",
 610 | 
 611 | 				THREE.DeferredShaderChunk[ "combine" ],
 612 | 
 613 | 			"}"
 614 | 
 615 | 		].join("\n"),
 616 | 
 617 | 		vertexShader : [
 618 | 
 619 | 			"void main() { ",
 620 | 
 621 | 				// sphere proxy needs real position
 622 | 
 623 | 				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
 624 | 				"gl_Position = projectionMatrix * mvPosition;",
 625 | 
 626 | 			"}"
 627 | 
 628 | 		].join("\n")
 629 | 
 630 | 	},
 631 | 
 632 | 	"spotLight" : {
 633 | 
 634 | 		uniforms: {
 635 | 
 636 | 			samplerNormalDepth: { type: "t", value: null },
 637 | 			samplerColor: 		{ type: "t", value: null },
 638 | 			matProjInverse: { type: "m4", value: new THREE.Matrix4() },
 639 | 			viewWidth: 		{ type: "f", value: 800 },
 640 | 			viewHeight: 	{ type: "f", value: 600 },
 641 | 
 642 | 			lightPositionVS :{ type: "v3", value: new THREE.Vector3( 0, 1, 0 ) },
 643 | 			lightDirectionVS:{ type: "v3", value: new THREE.Vector3( 0, 1, 0 ) },
 644 | 			lightColor: 	{ type: "c", value: new THREE.Color( 0x000000 ) },
 645 | 			lightIntensity: { type: "f", value: 1.0 },
 646 | 			lightDistance: 	{ type: "f", value: 1.0 },
 647 | 			lightAngle: 	{ type: "f", value: 1.0 }
 648 | 
 649 | 		},
 650 | 
 651 | 		fragmentShader : [
 652 | 
 653 | 			"uniform vec3 lightPositionVS;",
 654 | 			"uniform vec3 lightDirectionVS;",
 655 | 
 656 | 			"uniform sampler2D samplerColor;",
 657 | 			"uniform sampler2D samplerNormalDepth;",
 658 | 
 659 | 			"uniform float viewHeight;",
 660 | 			"uniform float viewWidth;",
 661 | 
 662 | 			"uniform float lightAngle;",
 663 | 			"uniform float lightIntensity;",
 664 | 			"uniform vec3 lightColor;",
 665 | 
 666 | 			"uniform mat4 matProjInverse;",
 667 | 
 668 | 			THREE.DeferredShaderChunk[ "unpackFloat" ],
 669 | 
 670 | 			"void main() {",
 671 | 
 672 | 				THREE.DeferredShaderChunk[ "computeVertexPositionVS" ],
 673 | 				THREE.DeferredShaderChunk[ "computeNormal" ],
 674 | 				THREE.DeferredShaderChunk[ "unpackColorMap" ],
 675 | 
 676 | 				// compute light
 677 | 
 678 | 				"vec3 lightVector = normalize( lightPositionVS.xyz - vertexPositionVS.xyz );",
 679 | 
 680 | 				"float rho = dot( lightDirectionVS, lightVector );",
 681 | 				"float rhoMax = cos( lightAngle * 0.5 );",
 682 | 
 683 | 				"if ( rho <= rhoMax ) discard;",
 684 | 
 685 | 				"float theta = rhoMax + 0.0001;",
 686 | 				"float phi = rhoMax + 0.05;",
 687 | 				"float falloff = 4.0;",
 688 | 
 689 | 				"float spot = 0.0;",
 690 | 
 691 | 				"if ( rho >= phi ) {",
 692 | 
 693 | 					"spot = 1.0;",
 694 | 
 695 | 				"} else if ( rho <= theta ) {",
 696 | 
 697 | 					"spot = 0.0;",
 698 | 
 699 | 				"} else { ",
 700 | 
 701 | 					"spot = pow( ( rho - theta ) / ( phi - theta ), falloff );",
 702 | 
 703 | 				"}",
 704 | 
 705 | 				THREE.DeferredShaderChunk[ "computeDiffuse" ],
 706 | 
 707 | 				"diffuse *= spot;",
 708 | 
 709 | 				THREE.DeferredShaderChunk[ "computeSpecular" ],
 710 | 
 711 | 				// combine
 712 | 
 713 | 				"const float attenuation = 1.0;",
 714 | 
 715 | 				THREE.DeferredShaderChunk[ "combine" ],
 716 | 
 717 | 			"}"
 718 | 
 719 | 		].join("\n"),
 720 | 
 721 | 		vertexShader : [
 722 | 
 723 | 			"void main() { ",
 724 | 
 725 | 				// full screen quad proxy
 726 | 
 727 | 				"gl_Position = vec4( sign( position.xy ), 0.0, 1.0 );",
 728 | 
 729 | 			"}"
 730 | 
 731 | 		].join("\n")
 732 | 
 733 | 	},
 734 | 
 735 | 	"directionalLight" : {
 736 | 
 737 | 		uniforms: {
 738 | 
 739 | 			samplerNormalDepth: { type: "t", value: null },
 740 | 			samplerColor: 		{ type: "t", value: null },
 741 | 			matProjInverse: { type: "m4", value: new THREE.Matrix4() },
 742 | 			viewWidth: 		{ type: "f", value: 800 },
 743 | 			viewHeight: 	{ type: "f", value: 600 },
 744 | 
 745 | 			lightDirectionVS: { type: "v3", value: new THREE.Vector3( 0, 1, 0 ) },
 746 | 			lightColor: 	{ type: "c", value: new THREE.Color( 0x000000 ) },
 747 | 			lightIntensity: { type: "f", value: 1.0 }
 748 | 
 749 | 		},
 750 | 
 751 | 		fragmentShader : [
 752 | 
 753 | 			"uniform sampler2D samplerColor;",
 754 | 			"uniform sampler2D samplerNormalDepth;",
 755 | 
 756 | 			"uniform float lightRadius;",
 757 | 			"uniform float lightIntensity;",
 758 | 			"uniform float viewHeight;",
 759 | 			"uniform float viewWidth;",
 760 | 
 761 | 			"uniform vec3 lightColor;",
 762 | 			"uniform vec3 lightDirectionVS;",
 763 | 
 764 | 			"uniform mat4 matProjInverse;",
 765 | 
 766 | 			THREE.DeferredShaderChunk[ "unpackFloat" ],
 767 | 
 768 | 			"void main() {",
 769 | 
 770 | 				THREE.DeferredShaderChunk[ "computeVertexPositionVS" ],
 771 | 				THREE.DeferredShaderChunk[ "computeNormal" ],
 772 | 				THREE.DeferredShaderChunk[ "unpackColorMap" ],
 773 | 
 774 | 				// compute light
 775 | 
 776 | 				"vec3 lightVector = lightDirectionVS;",
 777 | 
 778 | 				THREE.DeferredShaderChunk[ "computeDiffuse" ],
 779 | 				THREE.DeferredShaderChunk[ "computeSpecular" ],
 780 | 
 781 | 				// combine
 782 | 
 783 | 				"const float attenuation = 1.0;",
 784 | 
 785 | 				THREE.DeferredShaderChunk[ "combine" ],
 786 | 
 787 | 			"}"
 788 | 
 789 | 		].join("\n"),
 790 | 
 791 | 		vertexShader : [
 792 | 
 793 | 			"void main() { ",
 794 | 
 795 | 				// full screen quad proxy
 796 | 
 797 | 				"gl_Position = vec4( sign( position.xy ), 0.0, 1.0 );",
 798 | 
 799 | 			"}"
 800 | 
 801 | 		].join("\n")
 802 | 
 803 | 	},
 804 | 
 805 | 	"hemisphereLight" : {
 806 | 
 807 | 		uniforms: {
 808 | 
 809 | 			samplerNormalDepth: { type: "t", value: null },
 810 | 			samplerColor: 		{ type: "t", value: null },
 811 | 			matProjInverse: { type: "m4", value: new THREE.Matrix4() },
 812 | 			viewWidth: 		{ type: "f", value: 800 },
 813 | 			viewHeight: 	{ type: "f", value: 600 },
 814 | 
 815 | 			lightDirectionVS: { type: "v3", value: new THREE.Vector3( 0, 1, 0 ) },
 816 | 			lightColorSky: 	  { type: "c", value: new THREE.Color( 0x000000 ) },
 817 | 			lightColorGround: { type: "c", value: new THREE.Color( 0x000000 ) },
 818 | 			lightIntensity:   { type: "f", value: 1.0 }
 819 | 
 820 | 		},
 821 | 
 822 | 		fragmentShader : [
 823 | 
 824 | 			"uniform sampler2D samplerColor;",
 825 | 			"uniform sampler2D samplerNormalDepth;",
 826 | 
 827 | 			"uniform float lightRadius;",
 828 | 			"uniform float lightIntensity;",
 829 | 			"uniform float viewHeight;",
 830 | 			"uniform float viewWidth;",
 831 | 
 832 | 			"uniform vec3 lightColorSky;",
 833 | 			"uniform vec3 lightColorGround;",
 834 | 			"uniform vec3 lightDirectionVS;",
 835 | 
 836 | 			"uniform mat4 matProjInverse;",
 837 | 
 838 | 			THREE.DeferredShaderChunk[ "unpackFloat" ],
 839 | 
 840 | 			"void main() {",
 841 | 
 842 | 				THREE.DeferredShaderChunk[ "computeVertexPositionVS" ],
 843 | 				THREE.DeferredShaderChunk[ "computeNormal" ],
 844 | 				THREE.DeferredShaderChunk[ "unpackColorMap" ],
 845 | 
 846 | 				// compute light
 847 | 
 848 | 				"vec3 lightVector = lightDirectionVS;",
 849 | 
 850 | 				// diffuse
 851 | 
 852 | 				"float dotProduct = dot( normal, lightVector );",
 853 | 				"float hemiDiffuseWeight = 0.5 * dotProduct + 0.5;",
 854 | 
 855 | 				"vec3 hemiColor = mix( lightColorGround, lightColorSky, hemiDiffuseWeight );",
 856 | 
 857 | 				"vec3 diffuse = hemiColor;",
 858 | 
 859 | 				// specular (sky light)
 860 | 
 861 | 				"vec3 hemiHalfVectorSky = normalize( lightVector - vertexPositionVS.xyz );",
 862 | 				"float hemiDotNormalHalfSky = 0.5 * dot( normal, hemiHalfVectorSky ) + 0.5;",
 863 | 				"float hemiSpecularWeightSky = max( pow( hemiDotNormalHalfSky, shininess ), 0.0 );",
 864 | 
 865 | 				// specular (ground light)
 866 | 
 867 | 				"vec3 lVectorGround = -lightVector;",
 868 | 
 869 | 				"vec3 hemiHalfVectorGround = normalize( lVectorGround - vertexPositionVS.xyz );",
 870 | 				"float hemiDotNormalHalfGround = 0.5 * dot( normal, hemiHalfVectorGround ) + 0.5;",
 871 | 				"float hemiSpecularWeightGround = max( pow( hemiDotNormalHalfGround, shininess ), 0.0 );",
 872 | 
 873 | 				"float dotProductGround = dot( normal, lVectorGround );",
 874 | 
 875 | 				"float specularNormalization = ( shininess + 2.0001 ) / 8.0;",
 876 | 
 877 | 				"vec3 schlickSky = specularColor + vec3( 1.0 - specularColor ) * pow( 1.0 - dot( lightVector, hemiHalfVectorSky ), 5.0 );",
 878 | 				"vec3 schlickGround = specularColor + vec3( 1.0 - specularColor ) * pow( 1.0 - dot( lVectorGround, hemiHalfVectorGround ), 5.0 );",
 879 | 				"vec3 specular = hemiColor * specularNormalization * ( schlickSky * hemiSpecularWeightSky * max( dotProduct, 0.0 ) + schlickGround * hemiSpecularWeightGround * max( dotProductGround, 0.0 ) );",
 880 | 
 881 | 				// combine
 882 | 
 883 | 				"gl_FragColor = vec4( lightIntensity * ( albedo * diffuse + specular ), 1.0 );",
 884 | 
 885 | 			"}"
 886 | 
 887 | 		].join("\n"),
 888 | 
 889 | 		vertexShader : [
 890 | 
 891 | 			"void main() { ",
 892 | 
 893 | 				// full screen quad proxy
 894 | 
 895 | 				"gl_Position = vec4( sign( position.xy ), 0.0, 1.0 );",
 896 | 
 897 | 			"}"
 898 | 
 899 | 		].join("\n")
 900 | 
 901 | 	},
 902 | 
 903 | 	"areaLight" : {
 904 | 
 905 | 		uniforms: {
 906 | 
 907 | 			samplerNormalDepth: { type: "t", value: null },
 908 | 			samplerColor: 		{ type: "t", value: null },
 909 | 			matProjInverse: { type: "m4", value: new THREE.Matrix4() },
 910 | 			viewWidth: 		{ type: "f", value: 800 },
 911 | 			viewHeight: 	{ type: "f", value: 600 },
 912 | 
 913 | 			lightPositionVS: { type: "v3", value: new THREE.Vector3( 0, 1, 0 ) },
 914 | 			lightNormalVS: 	 { type: "v3", value: new THREE.Vector3( 0, -1, 0 ) },
 915 | 			lightRightVS:  	 { type: "v3", value: new THREE.Vector3( 1, 0, 0 ) },
 916 | 			lightUpVS:  	 { type: "v3", value: new THREE.Vector3( 1, 0, 0 ) },
 917 | 
 918 | 			lightColor: 	{ type: "c", value: new THREE.Color( 0x000000 ) },
 919 | 			lightIntensity: { type: "f", value: 1.0 },
 920 | 
 921 | 			lightWidth:  { type: "f", value: 1.0 },
 922 | 			lightHeight: { type: "f", value: 1.0 },
 923 | 
 924 | 			constantAttenuation:  { type: "f", value: 1.5 },
 925 | 			linearAttenuation:    { type: "f", value: 0.5 },
 926 | 			quadraticAttenuation: { type: "f", value: 0.1 }
 927 | 
 928 | 		},
 929 | 
 930 | 		fragmentShader : [
 931 | 
 932 | 			"uniform vec3 lightPositionVS;",
 933 | 			"uniform vec3 lightNormalVS;",
 934 | 			"uniform vec3 lightRightVS;",
 935 | 			"uniform vec3 lightUpVS;",
 936 | 
 937 | 			"uniform sampler2D samplerColor;",
 938 | 			"uniform sampler2D samplerNormalDepth;",
 939 | 
 940 | 			"uniform float lightWidth;",
 941 | 			"uniform float lightHeight;",
 942 | 
 943 | 			"uniform float constantAttenuation;",
 944 | 			"uniform float linearAttenuation;",
 945 | 			"uniform float quadraticAttenuation;",
 946 | 
 947 | 			"uniform float lightIntensity;",
 948 | 			"uniform vec3 lightColor;",
 949 | 
 950 | 			"uniform float viewHeight;",
 951 | 			"uniform float viewWidth;",
 952 | 
 953 | 			"uniform mat4 matProjInverse;",
 954 | 
 955 | 			THREE.DeferredShaderChunk[ "unpackFloat" ],
 956 | 
 957 | 			"vec3 projectOnPlane( vec3 point, vec3 planeCenter, vec3 planeNorm ) {",
 958 | 
 959 | 				"return point - dot( point - planeCenter, planeNorm ) * planeNorm;",
 960 | 
 961 | 			"}",
 962 | 
 963 | 			"bool sideOfPlane( vec3 point, vec3 planeCenter, vec3 planeNorm ) {",
 964 | 
 965 | 				"return ( dot( point - planeCenter, planeNorm ) >= 0.0 );",
 966 | 
 967 | 			"}",
 968 | 
 969 | 			"vec3 linePlaneIntersect( vec3 lp, vec3 lv, vec3 pc, vec3 pn ) {",
 970 | 
 971 | 				"return lp + lv * ( dot( pn, pc - lp ) / dot( pn, lv ) );",
 972 | 
 973 | 			"}",
 974 | 
 975 | 			"float calculateAttenuation( float dist ) {",
 976 | 
 977 | 				"return ( 1.0 / ( constantAttenuation + linearAttenuation * dist + quadraticAttenuation * dist * dist ) );",
 978 | 
 979 | 			"}",
 980 | 
 981 | 			"void main() {",
 982 | 
 983 | 				THREE.DeferredShaderChunk[ "computeVertexPositionVS" ],
 984 | 				THREE.DeferredShaderChunk[ "computeNormal" ],
 985 | 				THREE.DeferredShaderChunk[ "unpackColorMap" ],
 986 | 
 987 | 				"float w = lightWidth;",
 988 | 				"float h = lightHeight;",
 989 | 
 990 | 				"vec3 proj = projectOnPlane( vertexPositionVS.xyz, lightPositionVS, lightNormalVS );",
 991 | 				"vec3 dir = proj - lightPositionVS;",
 992 | 
 993 | 				"vec2 diagonal = vec2( dot( dir, lightRightVS ), dot( dir, lightUpVS ) );",
 994 | 				"vec2 nearest2D = vec2( clamp( diagonal.x, -w, w ), clamp( diagonal.y, -h, h ) );",
 995 | 				"vec3 nearestPointInside = vec3( lightPositionVS ) + ( lightRightVS * nearest2D.x + lightUpVS * nearest2D.y );",
 996 | 
 997 | 				"vec3 lightDir = normalize( nearestPointInside - vertexPositionVS.xyz );",
 998 | 				"float NdotL = max( dot( lightNormalVS, -lightDir ), 0.0 );",
 999 | 				"float NdotL2 = max( dot( normal, lightDir ), 0.0 );",
1000 | 
1001 | 				//"if ( NdotL2 * NdotL > 0.0 && sideOfPlane( vertexPositionVS.xyz, lightPositionVS, lightNormalVS ) ) {",
1002 | 				"if ( NdotL2 * NdotL > 0.0 ) {",
1003 | 
1004 | 					// diffuse
1005 | 
1006 | 					"vec3 diffuse = vec3( sqrt( NdotL * NdotL2 ) );",
1007 | 
1008 | 					// specular
1009 | 
1010 | 					"vec3 specular = vec3( 0.0 );",
1011 | 
1012 | 					"vec3 R = reflect( normalize( -vertexPositionVS.xyz ), normal );",
1013 | 					"vec3 E = linePlaneIntersect( vertexPositionVS.xyz, R, vec3( lightPositionVS ), lightNormalVS );",
1014 | 
1015 | 					"float specAngle = dot( R, lightNormalVS );",
1016 | 
1017 | 					"if ( specAngle > 0.0 ) {",
1018 | 
1019 | 						"vec3 dirSpec = E - vec3( lightPositionVS );",
1020 | 						"vec2 dirSpec2D = vec2( dot( dirSpec, lightRightVS ), dot( dirSpec, lightUpVS ) );",
1021 | 						"vec2 nearestSpec2D = vec2( clamp( dirSpec2D.x, -w, w ), clamp( dirSpec2D.y, -h, h ) );",
1022 | 						"float specFactor = 1.0 - clamp( length( nearestSpec2D - dirSpec2D ) * 0.05 * shininess, 0.0, 1.0 );",
1023 | 						"specular = specularColor * specFactor * specAngle * diffuse;",
1024 | 
1025 | 					"}",
1026 | 
1027 | 					// combine
1028 | 
1029 | 					"float dist = distance( vertexPositionVS.xyz, nearestPointInside );",
1030 | 					"float attenuation = calculateAttenuation( dist );",
1031 | 
1032 | 					THREE.DeferredShaderChunk[ "combine" ],
1033 | 
1034 | 				"} else {",
1035 | 
1036 | 					"discard;",
1037 | 
1038 | 				"}",
1039 | 
1040 | 			"}"
1041 | 
1042 | 		].join("\n"),
1043 | 
1044 | 		vertexShader : [
1045 | 
1046 | 			"void main() {",
1047 | 
1048 | 				// full screen quad proxy
1049 | 
1050 | 				"gl_Position = vec4( sign( position.xy ), 0.0, 1.0 );",
1051 | 
1052 | 			"}"
1053 | 
1054 | 		].join("\n")
1055 | 
1056 | 	},
1057 | 
1058 | 	"emissiveLight" : {
1059 | 
1060 | 		uniforms: {
1061 | 
1062 | 			samplerColor: 	{ type: "t", value: null },
1063 | 			viewWidth: 		{ type: "f", value: 800 },
1064 | 			viewHeight: 	{ type: "f", value: 600 },
1065 | 
1066 | 		},
1067 | 
1068 | 		fragmentShader : [
1069 | 
1070 | 			"uniform sampler2D samplerColor;",
1071 | 
1072 | 			"uniform float viewHeight;",
1073 | 			"uniform float viewWidth;",
1074 | 
1075 | 			THREE.DeferredShaderChunk[ "unpackFloat" ],
1076 | 
1077 | 			"void main() {",
1078 | 
1079 | 				"vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );",
1080 | 
1081 | 				"vec4 colorMap = texture2D( samplerColor, texCoord );",
1082 | 				"vec3 emissiveColor = float_to_vec3( abs( colorMap.w ) );",
1083 | 
1084 | 				"gl_FragColor = vec4( emissiveColor, 1.0 );",
1085 | 
1086 | 			"}"
1087 | 
1088 | 		].join("\n"),
1089 | 
1090 | 		vertexShader : [
1091 | 
1092 | 			"void main() { ",
1093 | 
1094 | 				// full screen quad proxy
1095 | 
1096 | 				"gl_Position = vec4( sign( position.xy ), 0.0, 1.0 );",
1097 | 
1098 | 			"}"
1099 | 
1100 | 		].join("\n")
1101 | 
1102 | 	}
1103 | 
1104 | };
1105 | 


--------------------------------------------------------------------------------
/libs/ShaderPass.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @author alteredq / http://alteredqualia.com/
 3 |  */
 4 | 
 5 | THREE.ShaderPass = function ( shader, textureID ) {
 6 | 
 7 | 	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
 8 | 
 9 | 	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
10 | 
11 | 	this.material = new THREE.ShaderMaterial( {
12 | 
13 | 		uniforms: this.uniforms,
14 | 		vertexShader: shader.vertexShader,
15 | 		fragmentShader: shader.fragmentShader
16 | 
17 | 	} );
18 | 
19 | 	this.renderToScreen = false;
20 | 
21 | 	this.enabled = true;
22 | 	this.needsSwap = true;
23 | 	this.clear = false;
24 | 
25 | };
26 | 
27 | THREE.ShaderPass.prototype = {
28 | 
29 | 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
30 | 
31 | 		if ( this.uniforms[ this.textureID ] ) {
32 | 
33 | 			this.uniforms[ this.textureID ].value = readBuffer;
34 | 
35 | 		}
36 | 
37 | 		THREE.EffectComposer.quad.material = this.material;
38 | 
39 | 		if ( this.renderToScreen ) {
40 | 
41 | 			renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera );
42 | 
43 | 		} else {
44 | 
45 | 			renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, writeBuffer, this.clear );
46 | 
47 | 		}
48 | 
49 | 	}
50 | 
51 | };
52 | 


--------------------------------------------------------------------------------
/libs/chroma.js:
--------------------------------------------------------------------------------
1 | (function(){var Color,ColorScale,K,PITHIRD,TWOPI,X,Y,Z,brewer,chroma,clip_rgb,colors,cos,css2rgb,hex2rgb,hsi2rgb,hsl2rgb,hsv2rgb,lab2lch,lab2rgb,lab_xyz,lch2lab,lch2rgb,limit,luminance,luminance_x,rgb2hex,rgb2hsi,rgb2hsl,rgb2hsv,rgb2lab,rgb2lch,rgb_xyz,root,type,unpack,xyz_lab,xyz_rgb,_ref,_ref1,_ref2,_ref3,_ref4,_ref5;root=typeof exports!=="undefined"&&exports!==null?exports:this;chroma=(_ref=root.chroma)!=null?_ref:root.chroma={};if(typeof module!=="undefined"&&module!==null){module.exports=chroma}Color=function(){function Color(x,y,z,m){var me,me_rgb,_ref1;me=this;if(x==null&&y==null&&z==null&&m==null){x=[255,0,255]}if(type(x)==="array"&&x.length===3){if(m==null){m=y}_ref1=x,x=_ref1[0],y=_ref1[1],z=_ref1[2]}if(type(x)==="string"){m="hex"}else{if(m==null){m="rgb"}}if(m==="rgb"){me._rgb=[x,y,z]}else if(m==="hsl"){me._rgb=hsl2rgb(x,y,z)}else if(m==="hsv"){me._rgb=hsv2rgb(x,y,z)}else if(m==="hex"){me._rgb=hex2rgb(x)}else if(m==="lab"){me._rgb=lab2rgb(x,y,z)}else if(m==="lch"){me._rgb=lch2rgb(x,y,z)}else if(m==="hsi"){me._rgb=hsi2rgb(x,y,z)}me_rgb=clip_rgb(me._rgb)}Color.prototype.rgb=function(){return this._rgb};Color.prototype.hex=function(){return rgb2hex(this._rgb)};Color.prototype.toString=function(){return this.hex()};Color.prototype.hsl=function(){return rgb2hsl(this._rgb)};Color.prototype.hsv=function(){return rgb2hsv(this._rgb)};Color.prototype.lab=function(){return rgb2lab(this._rgb)};Color.prototype.lch=function(){return rgb2lch(this._rgb)};Color.prototype.hsi=function(){return rgb2hsi(this._rgb)};Color.prototype.luminance=function(){return luminance(this._rgb)};Color.prototype.name=function(){var h,k;h=this.hex();for(k in chroma.colors){if(h===chroma.colors[k]){return k}}return h};Color.prototype.interpolate=function(f,col,m){var dh,hue,hue0,hue1,lbv,lbv0,lbv1,me,sat,sat0,sat1,xyz0,xyz1;me=this;if(m==null){m="rgb"}if(type(col)==="string"){col=new Color(col)}if(m==="hsl"||m==="hsv"||m==="lch"||m==="hsi"){if(m==="hsl"){xyz0=me.hsl();xyz1=col.hsl()}else if(m==="hsv"){xyz0=me.hsv();xyz1=col.hsv()}else if(m==="hsi"){xyz0=me.hsi();xyz1=col.hsi()}else if(m==="lch"){xyz0=me.lch();xyz1=col.lch()}if(m.substr(0,1)==="h"){hue0=xyz0[0],sat0=xyz0[1],lbv0=xyz0[2];hue1=xyz1[0],sat1=xyz1[1],lbv1=xyz1[2]}else{lbv0=xyz0[0],sat0=xyz0[1],hue0=xyz0[2];lbv1=xyz1[0],sat1=xyz1[1],hue1=xyz1[2]}if(!isNaN(hue0)&&!isNaN(hue1)){if(hue1>hue0&&hue1-hue0>180){dh=hue1-(hue0+360)}else if(hue1<hue0&&hue0-hue1>180){dh=hue1+360-hue0}else{dh=hue1-hue0}hue=hue0+f*dh}else if(!isNaN(hue0)){hue=hue0;if(lbv1===1||lbv1===0){sat=sat0}}else if(!isNaN(hue1)){hue=hue1;if(lbv0===1||lbv0===0){sat=sat1}}else{hue=void 0}if(sat==null){sat=sat0+f*(sat1-sat0)}lbv=lbv0+f*(lbv1-lbv0);if(m.substr(0,1)==="h"){return new Color(hue,sat,lbv,m)}else{return new Color(lbv,sat,hue,m)}}else if(m==="rgb"){xyz0=me._rgb;xyz1=col._rgb;return new Color(xyz0[0]+f*(xyz1[0]-xyz0[0]),xyz0[1]+f*(xyz1[1]-xyz0[1]),xyz0[2]+f*(xyz1[2]-xyz0[2]),m)}else if(m==="lab"){xyz0=me.lab();xyz1=col.lab();return new Color(xyz0[0]+f*(xyz1[0]-xyz0[0]),xyz0[1]+f*(xyz1[1]-xyz0[1]),xyz0[2]+f*(xyz1[2]-xyz0[2]),m)}else{throw"color mode "+m+" is not supported"}};Color.prototype.darken=function(amount){var lch,me;if(amount==null){amount=20}me=this;lch=me.lch();lch[0]-=amount;return chroma.lch(lch)};Color.prototype.brighten=function(amount){if(amount==null){amount=20}return this.darker(-amount)};Color.prototype.saturate=function(amount){var lch,me;if(amount==null){amount=20}me=this;lch=me.lch();lch[1]+=amount;return chroma.lch(lch)};Color.prototype.desaturate=function(amount){if(amount==null){amount=20}return this.saturate(-amount)};return Color}();hex2rgb=function(hex){var b,g,r,rgb,u;if(hex.match(/^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)){if(hex.length===4||hex.length===7){hex=hex.substr(1)}if(hex.length===3){hex=hex.split("");hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]}u=parseInt(hex,16);r=u>>16;g=u>>8&255;b=u&255;return[r,g,b]}if(rgb=css2rgb(hex)){return rgb}throw"unknown color: "+hex};css2rgb=function(css){var hsl,i,m,rgb;if(chroma.colors!=null&&chroma.colors[css]){return hex2rgb(chroma.colors[css])}if(m=css.match(/rgb\(\s*(\-?\d+),\s*(\-?\d+)\s*,\s*(\-?\d+)\s*\)/)){return m.slice(1,4)}if(m=css.match(/rgb\(\s*(\-?\d+)%,\s*(\-?\d+)%\s*,\s*(\-?\d+)%\s*\)/)){rgb=m.slice(1,4);for(i in rgb){rgb[i]=Math.round(rgb[i]*2.55)}return rgb}if(m=css.match(/hsl\(\s*(\-?\d+),\s*(\-?\d+)%\s*,\s*(\-?\d+)%\s*\)/)){hsl=m.slice(1,4);hsl[1]*=.01;hsl[2]*=.01;return hsl2rgb(hsl)}};rgb2hex=function(){var b,g,r,str,u,_ref1;_ref1=unpack(arguments),r=_ref1[0],g=_ref1[1],b=_ref1[2];u=r<<16|g<<8|b;str="000000"+u.toString(16);return"#"+str.substr(str.length-6)};hsv2rgb=function(){var b,f,g,h,i,p,q,r,s,t,v,_ref1,_ref2,_ref3,_ref4,_ref5,_ref6,_ref7;_ref1=unpack(arguments),h=_ref1[0],s=_ref1[1],v=_ref1[2];v*=255;if(s===0){r=g=b=v}else{if(h===360){h=0}if(h>360){h-=360}if(h<0){h+=360}h/=60;i=Math.floor(h);f=h-i;p=v*(1-s);q=v*(1-s*f);t=v*(1-s*(1-f));switch(i){case 0:_ref2=[v,t,p],r=_ref2[0],g=_ref2[1],b=_ref2[2];break;case 1:_ref3=[q,v,p],r=_ref3[0],g=_ref3[1],b=_ref3[2];break;case 2:_ref4=[p,v,t],r=_ref4[0],g=_ref4[1],b=_ref4[2];break;case 3:_ref5=[p,q,v],r=_ref5[0],g=_ref5[1],b=_ref5[2];break;case 4:_ref6=[t,p,v],r=_ref6[0],g=_ref6[1],b=_ref6[2];break;case 5:_ref7=[v,p,q],r=_ref7[0],g=_ref7[1],b=_ref7[2]}}r=Math.round(r);g=Math.round(g);b=Math.round(b);return[r,g,b]};rgb2hsv=function(){var b,delta,g,h,max,min,r,s,v,_ref1;_ref1=unpack(arguments),r=_ref1[0],g=_ref1[1],b=_ref1[2];min=Math.min(r,g,b);max=Math.max(r,g,b);delta=max-min;v=max/255;if(max===0){h=void 0;s=0}else{s=delta/max;if(r===max){h=(g-b)/delta}if(g===max){h=2+(b-r)/delta}if(b===max){h=4+(r-g)/delta}h*=60;if(h<0){h+=360}}return[h,s,v]};hsl2rgb=function(){var b,c,g,h,i,l,r,s,t1,t2,t3,_i,_ref1,_ref2;_ref1=unpack(arguments),h=_ref1[0],s=_ref1[1],l=_ref1[2];if(s===0){r=g=b=l*255}else{t3=[0,0,0];c=[0,0,0];t2=l<.5?l*(1+s):l+s-l*s;t1=2*l-t2;h/=360;t3[0]=h+1/3;t3[1]=h;t3[2]=h-1/3;for(i=_i=0;_i<=2;i=++_i){if(t3[i]<0){t3[i]+=1}if(t3[i]>1){t3[i]-=1}if(6*t3[i]<1){c[i]=t1+(t2-t1)*6*t3[i]}else if(2*t3[i]<1){c[i]=t2}else if(3*t3[i]<2){c[i]=t1+(t2-t1)*(2/3-t3[i])*6}else{c[i]=t1}}_ref2=[Math.round(c[0]*255),Math.round(c[1]*255),Math.round(c[2]*255)],r=_ref2[0],g=_ref2[1],b=_ref2[2]}return[r,g,b]};rgb2hsl=function(r,g,b){var h,l,max,min,s,_ref1;if(r!==void 0&&r.length===3){_ref1=r,r=_ref1[0],g=_ref1[1],b=_ref1[2]}r/=255;g/=255;b/=255;min=Math.min(r,g,b);max=Math.max(r,g,b);l=(max+min)/2;if(max===min){s=0;h=void 0}else{s=l<.5?(max-min)/(max+min):(max-min)/(2-max-min)}if(r===max){h=(g-b)/(max-min)}else if(g===max){h=2+(b-r)/(max-min)}else if(b===max){h=4+(r-g)/(max-min)}h*=60;if(h<0){h+=360}return[h,s,l]};K=18;X=.95047;Y=1;Z=1.08883;lab2rgb=function(l,a,b){var g,r,x,y,z,_ref1,_ref2;if(l!==void 0&&l.length===3){_ref1=l,l=_ref1[0],a=_ref1[1],b=_ref1[2]}if(l!==void 0&&l.length===3){_ref2=l,l=_ref2[0],a=_ref2[1],b=_ref2[2]}y=(l+16)/116;x=y+a/500;z=y-b/200;x=lab_xyz(x)*X;y=lab_xyz(y)*Y;z=lab_xyz(z)*Z;r=xyz_rgb(3.2404542*x-1.5371385*y-.4985314*z);g=xyz_rgb(-.969266*x+1.8760108*y+.041556*z);b=xyz_rgb(.0556434*x-.2040259*y+1.0572252*z);return[limit(r,0,255),limit(g,0,255),limit(b,0,255)]};rgb2lab=function(){var b,g,r,x,y,z,_ref1;_ref1=unpack(arguments),r=_ref1[0],g=_ref1[1],b=_ref1[2];r=rgb_xyz(r);g=rgb_xyz(g);b=rgb_xyz(b);x=xyz_lab((.4124564*r+.3575761*g+.1804375*b)/X);y=xyz_lab((.2126729*r+.7151522*g+.072175*b)/Y);z=xyz_lab((.0193339*r+.119192*g+.9503041*b)/Z);return[116*y-16,500*(x-y),200*(y-z)]};lch2lab=function(){var c,h,l,_ref1;_ref1=unpack(arguments),l=_ref1[0],c=_ref1[1],h=_ref1[2];h=h*Math.PI/180;return[l,Math.cos(h)*c,Math.sin(h)*c]};lch2rgb=function(l,c,h){var L,a,b,g,r,_ref1,_ref2;_ref1=lch2lab(l,c,h),L=_ref1[0],a=_ref1[1],b=_ref1[2];_ref2=lab2rgb(L,a,b),r=_ref2[0],g=_ref2[1],b=_ref2[2];return[limit(r,0,255),limit(g,0,255),limit(b,0,255)]};lab_xyz=function(x){if(x>.206893034){return x*x*x}else{return(x-4/29)/7.787037}};xyz_lab=function(x){if(x>.008856){return Math.pow(x,1/3)}else{return 7.787037*x+4/29}};xyz_rgb=function(r){return Math.round(255*(r<=.00304?12.92*r:1.055*Math.pow(r,1/2.4)-.055))};rgb_xyz=function(r){if((r/=255)<=.04045){return r/12.92}else{return Math.pow((r+.055)/1.055,2.4)}};lab2lch=function(){var a,b,c,h,l,_ref1;_ref1=unpack(arguments),l=_ref1[0],a=_ref1[1],b=_ref1[2];c=Math.sqrt(a*a+b*b);h=Math.atan2(b,a)/Math.PI*180;return[l,c,h]};rgb2lch=function(){var a,b,g,l,r,_ref1,_ref2;_ref1=unpack(arguments),r=_ref1[0],g=_ref1[1],b=_ref1[2];_ref2=rgb2lab(r,g,b),l=_ref2[0],a=_ref2[1],b=_ref2[2];return lab2lch(l,a,b)};rgb2hsi=function(){var TWOPI,b,g,h,i,min,r,s,_ref1;_ref1=unpack(arguments),r=_ref1[0],g=_ref1[1],b=_ref1[2];TWOPI=Math.PI*2;r/=255;g/=255;b/=255;min=Math.min(r,g,b);i=(r+g+b)/3;s=1-min/i;if(s===0){h=0}else{h=(r-g+(r-b))/2;h/=Math.sqrt((r-g)*(r-g)+(r-b)*(g-b));h=Math.acos(h);if(b>g){h=TWOPI-h}h/=TWOPI}return[h*360,s,i]};hsi2rgb=function(h,s,i){var b,g,r,_ref1;_ref1=unpack(arguments),h=_ref1[0],s=_ref1[1],i=_ref1[2];h/=360;if(h<1/3){b=(1-s)/3;r=(1+s*cos(TWOPI*h)/cos(PITHIRD-TWOPI*h))/3;g=1-(b+r)}else if(h<2/3){h-=1/3;r=(1-s)/3;g=(1+s*cos(TWOPI*h)/cos(PITHIRD-TWOPI*h))/3;b=1-(r+g)}else{h-=2/3;g=(1-s)/3;b=(1+s*cos(TWOPI*h)/cos(PITHIRD-TWOPI*h))/3;r=1-(g+b)}r=limit(i*r*3);g=limit(i*g*3);b=limit(i*b*3);return[r*255,g*255,b*255]};clip_rgb=function(rgb){var i;for(i in rgb){if(rgb[i]<0){rgb[i]=0}if(rgb[i]>255){rgb[i]=255}}return rgb};luminance=function(r,g,b){var _ref1;_ref1=unpack(arguments),r=_ref1[0],g=_ref1[1],b=_ref1[2];r=luminance_x(r);g=luminance_x(g);b=luminance_x(b);return.2126*r+.7152*g+.0722*b};luminance_x=function(x){x/=255;if(x<=.03928){return x/12.92}else{return Math.pow((x+.055)/1.055,2.4)}};chroma.Color=Color;chroma.color=function(x,y,z,m){return new Color(x,y,z,m)};chroma.hsl=function(h,s,l){return new Color(h,s,l,"hsl")};chroma.hsv=function(h,s,v){return new Color(h,s,v,"hsv")};chroma.rgb=function(r,g,b){return new Color(r,g,b,"rgb")};chroma.hex=function(x){return new Color(x)};chroma.css=function(x){return new Color(x)};chroma.lab=function(l,a,b){return new Color(l,a,b,"lab")};chroma.lch=function(l,c,h){return new Color(l,c,h,"lch")};chroma.hsi=function(h,s,i){return new Color(h,s,i,"hsi")};chroma.interpolate=function(a,b,f,m){if(a==null||b==null){return"#000"}if(type(a)==="string"){a=new Color(a)}if(type(b)==="string"){b=new Color(b)}return a.interpolate(f,b,m)};chroma.contrast=function(a,b){var l1,l2;if(type(a)==="string"){a=new Color(a)}if(type(b)==="string"){b=new Color(b)}l1=a.luminance();l2=b.luminance();if(l1>l2){return(l1+.05)/(l2+.05)}else{return(l2+.05)/(l1+.05)}};root=typeof exports!=="undefined"&&exports!==null?exports:this;chroma=(_ref1=root.chroma)!=null?_ref1:root.chroma={};Color=chroma.Color;ColorScale=function(){function ColorScale(opts){var me,_ref2,_ref3;if(opts==null){opts={}}me=this;me.range(opts.colors,opts.positions);me._mode=(_ref2=opts.mode)!=null?_ref2:"rgb";me._nacol=chroma.hex((_ref3=opts.nacol)!=null?_ref3:chroma.hex("#ccc"));me.domain([0,1]);me}ColorScale.prototype.range=function(colors,positions){var c,col,me,_i,_j,_ref2,_ref3,_ref4;me=this;if(colors==null){colors=["#ddd","#222"]}if(colors!=null&&type(colors)==="string"&&((_ref2=chroma.brewer)!=null?_ref2[colors]:void 0)!=null){colors=chroma.brewer[colors].slice(0)}for(c=_i=0,_ref3=colors.length-1;0<=_ref3?_i<=_ref3:_i>=_ref3;c=0<=_ref3?++_i:--_i){col=colors[c];if(type(col)==="string"){colors[c]=new Color(col)}}me._colors=colors;if(positions!=null){me._pos=positions}else{me._pos=[];for(c=_j=0,_ref4=colors.length-1;0<=_ref4?_j<=_ref4:_j>=_ref4;c=0<=_ref4?++_j:--_j){me._pos.push(c/(colors.length-1))}}return me};ColorScale.prototype.domain=function(domain){var me;if(domain==null){domain=[]}me=this;me._domain=domain;me._min=domain[0];me._max=domain[domain.length-1];if(domain.length===2){me._numClasses=0}else{me._numClasses=domain.length-1}return me};ColorScale.prototype.get=function(value){var c,f,f0,me;me=this;if(isNaN(value)){return me._nacol}if(me._domain.length>2){c=me.getClass(value);f=c/(me._numClasses-1)}else{f=f0=(value-me._min)/(me._max-me._min);f=Math.min(1,Math.max(0,f))}return me.fColor(f)};ColorScale.prototype.fColor=function(f){var col,cols,i,me,p,_i,_ref2;me=this;cols=me._colors;for(i=_i=0,_ref2=me._pos.length-1;0<=_ref2?_i<=_ref2:_i>=_ref2;i=0<=_ref2?++_i:--_i){p=me._pos[i];if(f<=p){col=cols[i];break}if(f>=p&&i===me._pos.length-1){col=cols[i];break}if(f>p&&f<me._pos[i+1]){f=(f-p)/(me._pos[i+1]-p);col=chroma.interpolate(cols[i],cols[i+1],f,me._mode);break}}return col};ColorScale.prototype.classifyValue=function(value){var domain,i,maxc,me,minc,n,val;me=this;domain=me._domain;val=value;if(domain.length>2){n=domain.length-1;i=me.getClass(value);val=domain[i]+(domain[i+1]-domain[i])*.5;minc=domain[0];maxc=domain[n-1];val=me._min+(val-minc)/(maxc-minc)*(me._max-me._min)}return val};ColorScale.prototype.getClass=function(value){var domain,i,n,self;self=this;domain=self._domain;if(domain!=null){n=domain.length-1;i=0;while(i<n&&value>=domain[i]){i++}return i-1}return 0};ColorScale.prototype.validValue=function(value){return!isNaN(value)};return ColorScale}();chroma.ColorScale=ColorScale;chroma.scale=function(colors,positions){var colscale,f,out;colscale=new chroma.ColorScale;colscale.range(colors,positions);out=false;f=function(v){var c;c=colscale.get(v);if(out&&c[out]){return c[out]()}else{return c}};f.domain=function(domain,classes,mode,key){var d;if(mode==null){mode="e"}if(classes!=null){d=chroma.analyze(domain,key);if(classes===0){domain=[d.min,d.max]}else{domain=chroma.limits(d,mode,classes)}}colscale.domain(domain);return f};f.mode=function(_m){colscale._mode=_m;return f};f.range=function(_colors,_pos){colscale.range(_colors,_pos);return f};f.out=function(_o){out=_o;return f};f.getColor=function(val){return f(val)};return f};if((_ref2=chroma.scales)==null){chroma.scales={}}chroma.scales.cool=function(){return chroma.scale([chroma.hsl(180,1,.9),chroma.hsl(250,.7,.4)])};chroma.scales.hot=function(){return chroma.scale(["#000","#f00","#ff0","#fff"],[0,.25,.75,1]).mode("rgb")};chroma.analyze=function(data,key,filter){var add,k,r,val,visit,_i,_len;r={min:Number.MAX_VALUE,max:Number.MAX_VALUE*-1,sum:0,values:[],count:0};if(filter==null){filter=function(){return true}}add=function(val){if(val!=null&&!isNaN(val)){r.values.push(val);r.sum+=val;if(val<r.min){r.min=val}if(val>r.max){r.max=val}r.count+=1}};visit=function(val,k){if(filter(val,k)){if(key!=null&&type(key)==="function"){return add(key(val))}else if(key!=null&&type(key)==="string"||type(key)==="number"){return add(val[key])}else{return add(val)}}};if(type(data)==="array"){for(_i=0,_len=data.length;_i<_len;_i++){val=data[_i];visit(val)}}else{for(k in data){val=data[k];visit(val,k)}}r.domain=[r.min,r.max];r.limits=function(mode,num){return chroma.limits(r,mode,num)};return r};chroma.limits=function(data,mode,num){var assignments,best,centroids,cluster,clusterSizes,dist,i,j,kClusters,limits,max,max_log,min,min_log,mindist,n,nb_iters,newCentroids,p,pb,pr,repeat,sum,tmpKMeansBreaks,value,values,_i,_j,_k,_l,_m,_n,_o,_p,_q,_r,_ref10,_ref11,_ref12,_ref13,_ref14,_ref15,_ref16,_ref17,_ref3,_ref4,_ref5,_ref6,_ref7,_ref8,_ref9,_s,_t,_u,_v,_w;if(mode==null){mode="equal"}if(num==null){num=7}if(data.values==null){data=chroma.analyze(data)}min=data.min;max=data.max;sum=data.sum;values=data.values.sort(function(a,b){return a-b});limits=[];if(mode.substr(0,1)==="c"){limits.push(min);limits.push(max)}if(mode.substr(0,1)==="e"){limits.push(min);for(i=_i=1,_ref3=num-1;1<=_ref3?_i<=_ref3:_i>=_ref3;i=1<=_ref3?++_i:--_i){limits.push(min+i/num*(max-min))}limits.push(max)}else if(mode.substr(0,1)==="l"){if(min<=0){throw"Logarithmic scales are only possible for values > 0"}min_log=Math.LOG10E*Math.log(min);max_log=Math.LOG10E*Math.log(max);limits.push(min);for(i=_j=1,_ref4=num-1;1<=_ref4?_j<=_ref4:_j>=_ref4;i=1<=_ref4?++_j:--_j){limits.push(Math.pow(10,min_log+i/num*(max_log-min_log)))}limits.push(max)}else if(mode.substr(0,1)==="q"){limits.push(min);for(i=_k=1,_ref5=num-1;1<=_ref5?_k<=_ref5:_k>=_ref5;i=1<=_ref5?++_k:--_k){p=values.length*i/num;pb=Math.floor(p);if(pb===p){limits.push(values[pb])}else{pr=p-pb;limits.push(values[pb]*pr+values[pb+1]*(1-pr))}}limits.push(max)}else if(mode.substr(0,1)==="k"){n=values.length;assignments=new Array(n);clusterSizes=new Array(num);repeat=true;nb_iters=0;centroids=null;centroids=[];centroids.push(min);for(i=_l=1,_ref6=num-1;1<=_ref6?_l<=_ref6:_l>=_ref6;i=1<=_ref6?++_l:--_l){centroids.push(min+i/num*(max-min))}centroids.push(max);while(repeat){for(j=_m=0,_ref7=num-1;0<=_ref7?_m<=_ref7:_m>=_ref7;j=0<=_ref7?++_m:--_m){clusterSizes[j]=0}for(i=_n=0,_ref8=n-1;0<=_ref8?_n<=_ref8:_n>=_ref8;i=0<=_ref8?++_n:--_n){value=values[i];mindist=Number.MAX_VALUE;for(j=_o=0,_ref9=num-1;0<=_ref9?_o<=_ref9:_o>=_ref9;j=0<=_ref9?++_o:--_o){dist=Math.abs(centroids[j]-value);if(dist<mindist){mindist=dist;best=j}}clusterSizes[best]++;assignments[i]=best}newCentroids=new Array(num);for(j=_p=0,_ref10=num-1;0<=_ref10?_p<=_ref10:_p>=_ref10;j=0<=_ref10?++_p:--_p){newCentroids[j]=null}for(i=_q=0,_ref11=n-1;0<=_ref11?_q<=_ref11:_q>=_ref11;i=0<=_ref11?++_q:--_q){cluster=assignments[i];if(newCentroids[cluster]===null){newCentroids[cluster]=values[i]}else{newCentroids[cluster]+=values[i]}}for(j=_r=0,_ref12=num-1;0<=_ref12?_r<=_ref12:_r>=_ref12;j=0<=_ref12?++_r:--_r){newCentroids[j]*=1/clusterSizes[j]}repeat=false;for(j=_s=0,_ref13=num-1;0<=_ref13?_s<=_ref13:_s>=_ref13;j=0<=_ref13?++_s:--_s){if(newCentroids[j]!==centroids[i]){repeat=true;break}}centroids=newCentroids;nb_iters++;if(nb_iters>200){repeat=false}}kClusters={};for(j=_t=0,_ref14=num-1;0<=_ref14?_t<=_ref14:_t>=_ref14;j=0<=_ref14?++_t:--_t){kClusters[j]=[]}for(i=_u=0,_ref15=n-1;0<=_ref15?_u<=_ref15:_u>=_ref15;i=0<=_ref15?++_u:--_u){cluster=assignments[i];kClusters[cluster].push(values[i])}tmpKMeansBreaks=[];for(j=_v=0,_ref16=num-1;0<=_ref16?_v<=_ref16:_v>=_ref16;j=0<=_ref16?++_v:--_v){tmpKMeansBreaks.push(kClusters[j][0]);tmpKMeansBreaks.push(kClusters[j][kClusters[j].length-1])}tmpKMeansBreaks=tmpKMeansBreaks.sort(function(a,b){return a-b});limits.push(tmpKMeansBreaks[0]);for(i=_w=1,_ref17=tmpKMeansBreaks.length-1;_w<=_ref17;i=_w+=2){if(!isNaN(tmpKMeansBreaks[i])){limits.push(tmpKMeansBreaks[i])}}}return limits};root=typeof exports!=="undefined"&&exports!==null?exports:this;type=function(){var classToType,name,_i,_len,_ref3;classToType={};_ref3="Boolean Number String Function Array Date RegExp Undefined Null".split(" ");for(_i=0,_len=_ref3.length;_i<_len;_i++){name=_ref3[_i];classToType["[object "+name+"]"]=name.toLowerCase()}return function(obj){var strType;strType=Object.prototype.toString.call(obj);return classToType[strType]||"object"}}();if((_ref3=root.type)==null){root.type=type}Array.max=function(array){return Math.max.apply(Math,array)};Array.min=function(array){return Math.min.apply(Math,array)};limit=function(x,min,max){if(min==null){min=0}if(max==null){max=1}if(x<min){x=min}if(x>max){x=max}return x};unpack=function(args){if(args.length===3){return args}else{return args[0]}};TWOPI=Math.PI*2;PITHIRD=Math.PI/3;cos=Math.cos;root=typeof exports!=="undefined"&&exports!==null?exports:this;chroma=(_ref4=root.chroma)!=null?_ref4:root.chroma={};chroma.brewer=brewer={OrRd:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],PuBu:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],BuPu:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],Oranges:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],BuGn:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],YlOrBr:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],YlGn:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],Reds:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],RdPu:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],Greens:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],YlGnBu:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],Purples:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],GnBu:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],Greys:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],YlOrRd:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],PuRd:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],Blues:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],PuBuGn:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],Spectral:["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],RdYlGn:["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],RdBu:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],PiYG:["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],PRGn:["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],RdYlBu:["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],BrBG:["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],RdGy:["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],PuOr:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],Set2:["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],Accent:["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],Set1:["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],Set3:["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],Dark2:["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],Paired:["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],Pastel2:["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],Pastel1:["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]};root=typeof exports!=="undefined"&&exports!==null?exports:this;chroma=(_ref5=root.chroma)!=null?_ref5:root.chroma={};chroma.colors=colors={indigo:"#4b0082",gold:"#ffd700",hotpink:"#ff69b4",firebrick:"#b22222",indianred:"#cd5c5c",yellow:"#ffff00",mistyrose:"#ffe4e1",darkolivegreen:"#556b2f",olive:"#808000",darkseagreen:"#8fbc8f",pink:"#ffc0cb",tomato:"#ff6347",lightcoral:"#f08080",orangered:"#ff4500",navajowhite:"#ffdead",lime:"#00ff00",palegreen:"#98fb98",darkslategrey:"#2f4f4f",greenyellow:"#adff2f",burlywood:"#deb887",seashell:"#fff5ee",mediumspringgreen:"#00fa9a",fuchsia:"#ff00ff",papayawhip:"#ffefd5",blanchedalmond:"#ffebcd",chartreuse:"#7fff00",dimgray:"#696969",black:"#000000",peachpuff:"#ffdab9",springgreen:"#00ff7f",aquamarine:"#7fffd4",white:"#ffffff",orange:"#ffa500",lightsalmon:"#ffa07a",darkslategray:"#2f4f4f",brown:"#a52a2a",ivory:"#fffff0",dodgerblue:"#1e90ff",peru:"#cd853f",lawngreen:"#7cfc00",chocolate:"#d2691e",crimson:"#dc143c",forestgreen:"#228b22",darkgrey:"#a9a9a9",lightseagreen:"#20b2aa",cyan:"#00ffff",mintcream:"#f5fffa",silver:"#c0c0c0",antiquewhite:"#faebd7",mediumorchid:"#ba55d3",skyblue:"#87ceeb",gray:"#808080",darkturquoise:"#00ced1",goldenrod:"#daa520",darkgreen:"#006400",floralwhite:"#fffaf0",darkviolet:"#9400d3",darkgray:"#a9a9a9",moccasin:"#ffe4b5",saddlebrown:"#8b4513",grey:"#808080",darkslateblue:"#483d8b",lightskyblue:"#87cefa",lightpink:"#ffb6c1",mediumvioletred:"#c71585",slategrey:"#708090",red:"#ff0000",deeppink:"#ff1493",limegreen:"#32cd32",darkmagenta:"#8b008b",palegoldenrod:"#eee8aa",plum:"#dda0dd",turquoise:"#40e0d0",lightgrey:"#d3d3d3",lightgoldenrodyellow:"#fafad2",darkgoldenrod:"#b8860b",lavender:"#e6e6fa",maroon:"#800000",yellowgreen:"#9acd32",sandybrown:"#f4a460",thistle:"#d8bfd8",violet:"#ee82ee",navy:"#000080",magenta:"#ff00ff",dimgrey:"#696969",tan:"#d2b48c",rosybrown:"#bc8f8f",olivedrab:"#6b8e23",blue:"#0000ff",lightblue:"#add8e6",ghostwhite:"#f8f8ff",honeydew:"#f0fff0",cornflowerblue:"#6495ed",slateblue:"#6a5acd",linen:"#faf0e6",darkblue:"#00008b",powderblue:"#b0e0e6",seagreen:"#2e8b57",darkkhaki:"#bdb76b",snow:"#fffafa",sienna:"#a0522d",mediumblue:"#0000cd",royalblue:"#4169e1",lightcyan:"#e0ffff",green:"#008000",mediumpurple:"#9370db",midnightblue:"#191970",cornsilk:"#fff8dc",paleturquoise:"#afeeee",bisque:"#ffe4c4",slategray:"#708090",darkcyan:"#008b8b",khaki:"#f0e68c",wheat:"#f5deb3",teal:"#008080",darkorchid:"#9932cc",deepskyblue:"#00bfff",salmon:"#fa8072",darkred:"#8b0000",steelblue:"#4682b4",palevioletred:"#db7093",lightslategray:"#778899",aliceblue:"#f0f8ff",lightslategrey:"#778899",lightgreen:"#90ee90",orchid:"#da70d6",gainsboro:"#dcdcdc",mediumseagreen:"#3cb371",lightgray:"#d3d3d3",mediumturquoise:"#48d1cc",lemonchiffon:"#fffacd",cadetblue:"#5f9ea0",lightyellow:"#ffffe0",lavenderblush:"#fff0f5",coral:"#ff7f50",purple:"#800080",aqua:"#00ffff",whitesmoke:"#f5f5f5",mediumslateblue:"#7b68ee",darkorange:"#ff8c00",mediumaquamarine:"#66cdaa",darksalmon:"#e9967a",beige:"#f5f5dc",blueviolet:"#8a2be2",azure:"#f0ffff",lightsteelblue:"#b0c4de",oldlace:"#fdf5e6"}}).call(this);


--------------------------------------------------------------------------------
/libs/stats.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author mrdoob / http://mrdoob.com/
  3 |  */
  4 | 
  5 | var Stats = function () {
  6 | 
  7 | 	var startTime = Date.now(), prevTime = startTime;
  8 | 	var ms = 0, msMin = Infinity, msMax = 0;
  9 | 	var fps = 0, fpsMin = Infinity, fpsMax = 0;
 10 | 	var frames = 0, mode = 0;
 11 | 
 12 | 	var container = document.createElement( 'div' );
 13 | 	container.id = 'stats';
 14 | 	container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
 15 | 	container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
 16 | 
 17 | 	var fpsDiv = document.createElement( 'div' );
 18 | 	fpsDiv.id = 'fps';
 19 | 	fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
 20 | 	container.appendChild( fpsDiv );
 21 | 
 22 | 	var fpsText = document.createElement( 'div' );
 23 | 	fpsText.id = 'fpsText';
 24 | 	fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
 25 | 	fpsText.innerHTML = 'FPS';
 26 | 	fpsDiv.appendChild( fpsText );
 27 | 
 28 | 	var fpsGraph = document.createElement( 'div' );
 29 | 	fpsGraph.id = 'fpsGraph';
 30 | 	fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
 31 | 	fpsDiv.appendChild( fpsGraph );
 32 | 
 33 | 	while ( fpsGraph.children.length < 74 ) {
 34 | 
 35 | 		var bar = document.createElement( 'span' );
 36 | 		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
 37 | 		fpsGraph.appendChild( bar );
 38 | 
 39 | 	}
 40 | 
 41 | 	var msDiv = document.createElement( 'div' );
 42 | 	msDiv.id = 'ms';
 43 | 	msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
 44 | 	container.appendChild( msDiv );
 45 | 
 46 | 	var msText = document.createElement( 'div' );
 47 | 	msText.id = 'msText';
 48 | 	msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
 49 | 	msText.innerHTML = 'MS';
 50 | 	msDiv.appendChild( msText );
 51 | 
 52 | 	var msGraph = document.createElement( 'div' );
 53 | 	msGraph.id = 'msGraph';
 54 | 	msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
 55 | 	msDiv.appendChild( msGraph );
 56 | 
 57 | 	while ( msGraph.children.length < 74 ) {
 58 | 
 59 | 		var bar = document.createElement( 'span' );
 60 | 		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
 61 | 		msGraph.appendChild( bar );
 62 | 
 63 | 	}
 64 | 
 65 | 	var setMode = function ( value ) {
 66 | 
 67 | 		mode = value;
 68 | 
 69 | 		switch ( mode ) {
 70 | 
 71 | 			case 0:
 72 | 				fpsDiv.style.display = 'block';
 73 | 				msDiv.style.display = 'none';
 74 | 				break;
 75 | 			case 1:
 76 | 				fpsDiv.style.display = 'none';
 77 | 				msDiv.style.display = 'block';
 78 | 				break;
 79 | 		}
 80 | 
 81 | 	}
 82 | 
 83 | 	var updateGraph = function ( dom, value ) {
 84 | 
 85 | 		var child = dom.appendChild( dom.firstChild );
 86 | 		child.style.height = value + 'px';
 87 | 
 88 | 	}
 89 | 
 90 | 	return {
 91 | 
 92 | 		REVISION: 11,
 93 | 
 94 | 		domElement: container,
 95 | 
 96 | 		setMode: setMode,
 97 | 
 98 | 		begin: function () {
 99 | 
100 | 			startTime = Date.now();
101 | 
102 | 		},
103 | 
104 | 		end: function () {
105 | 
106 | 			var time = Date.now();
107 | 
108 | 			ms = time - startTime;
109 | 			msMin = Math.min( msMin, ms );
110 | 			msMax = Math.max( msMax, ms );
111 | 
112 | 			msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
113 | 			updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
114 | 
115 | 			frames ++;
116 | 
117 | 			if ( time > prevTime + 1000 ) {
118 | 
119 | 				fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
120 | 				fpsMin = Math.min( fpsMin, fps );
121 | 				fpsMax = Math.max( fpsMax, fps );
122 | 
123 | 				fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
124 | 				updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
125 | 
126 | 				prevTime = time;
127 | 				frames = 0;
128 | 
129 | 			}
130 | 
131 | 			return time;
132 | 
133 | 		},
134 | 
135 | 		update: function () {
136 | 
137 | 			startTime = this.end();
138 | 
139 | 		}
140 | 
141 | 	}
142 | 
143 | };
144 | 


--------------------------------------------------------------------------------
/lineMaterial.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>Linematerial</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <style>
 11 |         body {
 12 |             margin: 0;
 13 |             overflow: hidden;
 14 |         }
 15 |     </style>
 16 | </head>
 17 | <body>
 18 | 
 19 | <div id="Stats-output">
 20 | </div>
 21 | <!-- 容器 -->
 22 | <div id="WebGL-output">
 23 | </div>
 24 | 
 25 | <script type="text/javascript">
 26 | 
 27 |     function init() {
 28 | 
 29 |         var stats = initStats();
 30 | 
 31 |         // create 场景
 32 |         var scene = new THREE.Scene();
 33 | 
 34 |         // create 相机
 35 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 36 | 
 37 |         // create 渲染器
 38 |         var renderer = new THREE.WebGLRenderer();
 39 | 
 40 |         renderer.setClearColor(new THREE.Color(0x000000, 1.0));
 41 |         renderer.setSize(window.innerWidth, window.innerHeight);
 42 |         renderer.shadowMapEnabled = true;
 43 | 
 44 | 
 45 |         // 定位相机在场景中的位置
 46 |         camera.position.x = -30;
 47 |         camera.position.y = 40;
 48 |         camera.position.z = 30;
 49 |         camera.lookAt(scene.position);
 50 | 
 51 |         // 添加AmbientLight
 52 |         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
 53 |         scene.add(ambientLight);
 54 | 
 55 |         // 添加spotlight 
 56 |         var spotLight = new THREE.SpotLight(0xffffff);
 57 |         spotLight.position.set(-40, 60, -10);
 58 |         spotLight.castShadow = true;
 59 |         scene.add(spotLight);
 60 | 
 61 |         // turtle
 62 |         var points = gosper(4, 60);
 63 | 
 64 | 
 65 |         var lines = new THREE.Geometry();
 66 |         var colors = [];
 67 |         var i = 0;
 68 |         points.forEach(function (e) {
 69 |             lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
 70 |             colors[i] = new THREE.Color(0xffffff);
 71 |             colors[i].setHSL(e.x / 100 + 0.5, (  e.y * 20 ) / 300, 0.8);
 72 |             i++;
 73 |         });
 74 | 
 75 |         lines.colors = colors;
 76 |         var material = new THREE.LineBasicMaterial({
 77 |             opacity: 1.0,
 78 |             linewidth: 1,
 79 |             vertexColors: THREE.VertexColors
 80 |         });
 81 | 
 82 |         var line = new THREE.Line(lines, material);
 83 |         line.position.set(25, -30, -60);
 84 |         scene.add(line);
 85 | 
 86 |         document.getElementById("WebGL-output").appendChild(renderer.domElement);
 87 | 
 88 |         var step = 0;
 89 |         render();
 90 | 
 91 |         function render() {
 92 |             stats.update();
 93 |             line.rotation.z = step += 0.01;
 94 | 
 95 |             requestAnimationFrame(render);
 96 |             renderer.render(scene, camera);
 97 |         }
 98 | 
 99 |         function gosper(a, b) {
100 | 
101 |             var turtle = [0, 0, 0];
102 |             var points = [];
103 |             var count = 0;
104 | 
105 |             rg(a, b, turtle);
106 | 
107 | 
108 |             return points;
109 | 
110 |             function rt(x) {
111 |                 turtle[2] += x;
112 |             }
113 | 
114 |             function lt(x) {
115 |                 turtle[2] -= x;
116 |             }
117 | 
118 |             function fd(dist) {
119 | //                ctx.beginPath();
120 |                 points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
121 | //                ctx.moveTo(turtle[0], turtle[1]);
122 | 
123 |                 var dir = turtle[2] * (Math.PI / 180);
124 |                 turtle[0] += Math.cos(dir) * dist;
125 |                 turtle[1] += Math.sin(dir) * dist;
126 | 
127 |                 points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
128 | //                ctx.lineTo(turtle[0], turtle[1]);
129 | //                ctx.stroke();
130 | 
131 |             }
132 | 
133 |             function rg(st, ln, turtle) {
134 | 
135 |                 st--;
136 |                 ln = ln / 2.6457;
137 |                 if (st > 0) {
138 | //                    ctx.strokeStyle = '#111';
139 |                     rg(st, ln, turtle);
140 |                     rt(60);
141 |                     gl(st, ln, turtle);
142 |                     rt(120);
143 |                     gl(st, ln, turtle);
144 |                     lt(60);
145 |                     rg(st, ln, turtle);
146 |                     lt(120);
147 |                     rg(st, ln, turtle);
148 |                     rg(st, ln, turtle);
149 |                     lt(60);
150 |                     gl(st, ln, turtle);
151 |                     rt(60);
152 |                 }
153 |                 if (st == 0) {
154 |                     fd(ln);
155 |                     rt(60);
156 |                     fd(ln);
157 |                     rt(120);
158 |                     fd(ln);
159 |                     lt(60);
160 |                     fd(ln);
161 |                     lt(120);
162 |                     fd(ln);
163 |                     fd(ln);
164 |                     lt(60);
165 |                     fd(ln);
166 |                     rt(60)
167 |                 }
168 |             }
169 | 
170 |             function gl(st, ln, turtle) {
171 |                 st--;
172 |                 ln = ln / 2.6457;
173 |                 if (st > 0) {
174 | //                    ctx.strokeStyle = '#555';
175 |                     lt(60);
176 |                     rg(st, ln, turtle);
177 |                     rt(60);
178 |                     gl(st, ln, turtle);
179 |                     gl(st, ln, turtle);
180 |                     rt(120);
181 |                     gl(st, ln, turtle);
182 |                     rt(60);
183 |                     rg(st, ln, turtle);
184 |                     lt(120);
185 |                     rg(st, ln, turtle);
186 |                     lt(60);
187 |                     gl(st, ln, turtle);
188 |                 }
189 |                 if (st == 0) {
190 |                     lt(60);
191 |                     fd(ln);
192 |                     rt(60);
193 |                     fd(ln);
194 |                     fd(ln);
195 |                     rt(120);
196 |                     fd(ln);
197 |                     rt(60);
198 |                     fd(ln);
199 |                     lt(120);
200 |                     fd(ln);
201 |                     lt(60);
202 |                     fd(ln);
203 |                 }
204 |             }
205 |         }
206 | 
207 |         function initStats() {
208 | 
209 |             var stats = new Stats();
210 | 
211 |             stats.setMode(0); // 0: fps, 1: ms
212 | 
213 |             stats.domElement.style.position = 'absolute';
214 |             stats.domElement.style.left = '0px';
215 |             stats.domElement.style.top = '0px';
216 | 
217 |             document.getElementById("Stats-output").appendChild(stats.domElement);
218 | 
219 |             return stats;
220 |         }
221 |     };
222 | 
223 |     window.onload = init;
224 | 
225 | 
226 | </script>
227 | </body>
228 | </html>


--------------------------------------------------------------------------------
/meshMaterial.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>meshMaterial</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <script type="text/javascript" src="./libs/CanvasRenderer.js"></script>
 12 |     <script type="text/javascript" src="./libs/Projector.js"></script>
 13 | 
 14 |     <style>
 15 |         body {
 16 |             margin: 0;
 17 |             overflow: hidden;
 18 |         }
 19 |     </style>
 20 | </head>
 21 | <body>
 22 | 
 23 | <div id="Stats-output">
 24 | </div>
 25 | <!-- WEBGL 容器 -->
 26 | <div id="WebGL-output">
 27 | </div>
 28 | 
 29 | <script type="text/javascript">
 30 | 
 31 |     function init() {   //onload
 32 | 
 33 |         var stats = initStats();
 34 | 
 35 |         // 创建 scene
 36 |         var scene = new THREE.Scene();
 37 | 
 38 |         // 创建 camera
 39 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 40 | 
 41 |         // 创建渲染器
 42 |         var renderer;
 43 |         var webGLRenderer = new THREE.WebGLRenderer();
 44 |         webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
 45 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 46 |         webGLRenderer.shadowMapEnabled = true;
 47 | 
 48 |         var canvasRenderer = new THREE.CanvasRenderer();
 49 |         canvasRenderer.setSize(window.innerWidth, window.innerHeight);
 50 |         renderer = webGLRenderer;
 51 | 
 52 |         var groundGeom = new THREE.PlaneGeometry(100, 100, 4, 4);
 53 |         var groundMesh = new THREE.Mesh(groundGeom, new THREE.MeshBasicMaterial({color: 0x777777}));
 54 |         groundMesh.rotation.x = -Math.PI / 2;
 55 |         groundMesh.position.y = -20;
 56 |         scene.add(groundMesh);
 57 | 
 58 |         var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);
 59 |         var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
 60 |         var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);
 61 | 
 62 | 
 63 |         var meshMaterial = new THREE.MeshNormalMaterial({color: 0x7777ff});
 64 |         var sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
 65 |         var cube = new THREE.Mesh(cubeGeometry, meshMaterial);
 66 |         var plane = new THREE.Mesh(planeGeometry, meshMaterial);
 67 | 
 68 |         // sphere的坐标
 69 |         sphere.position.x = 0;
 70 |         sphere.position.y = 3;
 71 |         sphere.position.z = 2;
 72 | 
 73 |         for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {
 74 |             var face = sphere.geometry.faces[f];
 75 |             var centroid = new THREE.Vector3(0, 0, 0);
 76 |             centroid.add(sphere.geometry.vertices[face.a]);
 77 |             centroid.add(sphere.geometry.vertices[face.b]);
 78 |             centroid.add(sphere.geometry.vertices[face.c]);
 79 |             centroid.divideScalar(3);
 80 | 
 81 |             var arrow = new THREE.ArrowHelper(
 82 |                     face.normal,
 83 |                     centroid,
 84 |                     2,
 85 |                     0x3333FF,
 86 |                     0.5,
 87 |                     0.5);
 88 |             sphere.add(arrow);
 89 |         }
 90 | 
 91 | 
 92 |         cube.position = sphere.position;
 93 |         plane.position = sphere.position;
 94 | 
 95 | 
 96 |         // 添加到场景
 97 |         scene.add(cube);
 98 | 
 99 |         // 调整相机坐标
100 |         camera.position.x = -20;
101 |         camera.position.y = 30;
102 |         camera.position.z = 40;
103 |         camera.lookAt(new THREE.Vector3(10, 0, 0));
104 | 
105 |         // 添加光源
106 |         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
107 |         scene.add(ambientLight);
108 | 
109 |         // 阴影
110 |         var spotLight = new THREE.SpotLight(0xffffff);
111 |         spotLight.position.set(-40, 60, -10);
112 |         spotLight.castShadow = true;
113 |         scene.add(spotLight);
114 | 
115 |         // 添加到容器html
116 |         document.getElementById("WebGL-output").appendChild(renderer.domElement);
117 | 
118 |         var step = 0;
119 |         var oldContext = null;
120 | 
121 |         var controls = new function () {
122 |             this.rotationSpeed = 0.02;
123 |             this.bouncingSpeed = 0.03;
124 | 
125 |             this.opacity = meshMaterial.opacity;
126 |             this.transparent = meshMaterial.transparent;
127 | 
128 |             this.visible = meshMaterial.visible;
129 |             this.side = "front";
130 | 
131 |             this.wireframe = meshMaterial.wireframe;
132 |             this.wireframeLinewidth = meshMaterial.wireframeLinewidth;
133 | 
134 |             this.selectedMesh = "cube";
135 | 
136 |             this.shadow = "flat";
137 | 
138 |         };
139 | 
140 |         var gui = new dat.GUI();
141 | 
142 | 
143 |         var spGui = gui.addFolder("Mesh");
144 |         spGui.add(controls, 'opacity', 0, 1).onChange(function (e) {
145 |             meshMaterial.opacity = e
146 |         });
147 |         spGui.add(controls, 'transparent').onChange(function (e) {
148 |             meshMaterial.transparent = e
149 |         });
150 |         spGui.add(controls, 'wireframe').onChange(function (e) {
151 |             meshMaterial.wireframe = e
152 |         });
153 |         spGui.add(controls, 'wireframeLinewidth', 0, 20).onChange(function (e) {
154 |             meshMaterial.wireframeLinewidth = e
155 |         });
156 |         spGui.add(controls, 'visible').onChange(function (e) {
157 |             meshMaterial.visible = e
158 |         });
159 |         spGui.add(controls, 'side', ["front", "back", "double"]).onChange(function (e) {
160 |             console.log(e);
161 |             switch (e) {
162 |                 case "front":
163 |                     meshMaterial.side = THREE.FrontSide;
164 |                     break;
165 |                 case "back":
166 |                     meshMaterial.side = THREE.BackSide;
167 |                     break;
168 |                 case "double":
169 |                     meshMaterial.side = THREE.DoubleSide;
170 |                     break;
171 |             }
172 |             meshMaterial.needsUpdate = true;
173 | 
174 |         });
175 |         spGui.add(controls, 'shadow', ["flat", "smooth"]).onChange(function (e) {
176 |             switch (e) {
177 |                 case "flat":
178 |                     meshMaterial.shading = THREE.FlatShading;
179 |                     break;
180 |                 case "smooth":
181 |                     meshMaterial.shading = THREE.SmoothShading;
182 |                     break;
183 |             }
184 | 
185 |             var oldPos = sphere.position.clone();
186 |             scene.remove(sphere);
187 |             scene.remove(plane);
188 |             scene.remove(cube);
189 |             sphere = new THREE.Mesh(sphere.geometry.clone(), meshMaterial);
190 |             cube = new THREE.Mesh(cube.geometry.clone(), meshMaterial);
191 |             plane = new THREE.Mesh(plane.geometry.clone(), meshMaterial);
192 | 
193 |             sphere.position = oldPos;
194 |             cube.position = oldPos;
195 |             plane.position = oldPos;
196 | 
197 |             switch (controls.selectedMesh) {
198 |                 case "cube":
199 |                     scene.add(cube);
200 | 
201 |                     break;
202 |                 case "sphere":
203 |                     scene.add(sphere);
204 | 
205 |                     break;
206 |                 case "plane":
207 |                     scene.add(plane);
208 |                     break;
209 | 
210 |             }
211 | 
212 |             meshMaterial.needsUpdate = true;
213 |             console.log(meshMaterial);
214 |         });
215 | 
216 |         spGui.add(controls, 'selectedMesh', ["cube", "sphere", "plane"]).onChange(function (e) {
217 | 
218 |             scene.remove(plane);
219 |             scene.remove(cube);
220 |             scene.remove(sphere);
221 | 
222 | 
223 |             switch (e) {
224 |                 case "cube":
225 |                     scene.add(cube);
226 | 
227 |                     break;
228 |                 case "sphere":
229 |                     scene.add(sphere);
230 | 
231 |                     break;
232 |                 case "plane":
233 |                     scene.add(plane);
234 |                     break;
235 | 
236 |             }
237 | 
238 |             scene.add(e);
239 |         });
240 | 
241 |         render();
242 | 
243 |         function render() {
244 |             stats.update();
245 | 
246 |             cube.rotation.y = step += 0.01;
247 |             plane.rotation.y = step;
248 |             sphere.rotation.y = step;
249 | 
250 | 
251 |             // requestAnimationFrame
252 |             requestAnimationFrame(render);
253 |             renderer.render(scene, camera);
254 |         }
255 | 
256 |         function initStats() {
257 | 
258 |             var stats = new Stats();
259 | 
260 |             stats.setMode(0); // 0: fps, 1: ms
261 | 
262 | 
263 |             stats.domElement.style.position = 'absolute';
264 |             stats.domElement.style.left = '0px';
265 |             stats.domElement.style.top = '0px';
266 | 
267 |             document.getElementById("Stats-output").appendChild(stats.domElement);
268 | 
269 |             return stats;
270 |         }
271 |     };
272 | 
273 |     window.onload = init;
274 | 
275 | 
276 | </script>
277 | </body>
278 | </html>


--------------------------------------------------------------------------------
/normalMap.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>normalMap</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <style>
 12 |         body {
 13 |             margin: 0;
 14 |             overflow: hidden;
 15 |         }
 16 |     </style>
 17 | </head>
 18 | <body>
 19 | 
 20 | <div id="Stats-output">
 21 | </div>
 22 | <div id="WebGL-output">
 23 | </div>
 24 | 
 25 | <script type="text/javascript">
 26 | 
 27 |     function init() {
 28 | 
 29 |         var stats = initStats();
 30 | 
 31 |         var scene = new THREE.Scene();
 32 | 
 33 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 34 | 
 35 |         var webGLRenderer = new THREE.WebGLRenderer();
 36 |         webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
 37 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 38 |         webGLRenderer.shadowMapEnabled = true;
 39 | 
 40 |         var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 15), "plaster.jpg");
 41 |         sphere1.rotation.y = -0.5;
 42 |         sphere1.position.x = 12;
 43 |         scene.add(sphere1);
 44 | 
 45 |         var sphere2 = createMesh(new THREE.BoxGeometry(15, 15, 15), "plaster.jpg", "plaster-normal.jpg");
 46 |         sphere2.rotation.y = 0.5;
 47 |         sphere2.position.x = -12;
 48 |         scene.add(sphere2);
 49 |         console.log(sphere2.geometry.faceVertexUvs);
 50 | 
 51 |         var floorTex = THREE.ImageUtils.loadTexture("./images/floor-wood.jpg");
 52 |         var plane = new THREE.Mesh(new THREE.BoxGeometry(200, 100, 0.1, 30), new THREE.MeshPhongMaterial({
 53 |             color: 0x3c3c3c,
 54 |             map: floorTex
 55 |         }));
 56 |         plane.position.y = -7.5;
 57 |         plane.rotation.x = -0.5 * Math.PI;
 58 |         scene.add(plane);
 59 | 
 60 |         camera.position.x = 00;
 61 |         camera.position.y = 12;
 62 |         camera.position.z = 38;
 63 |         camera.lookAt(new THREE.Vector3(0, 0, 0));
 64 | 
 65 |         var ambiLight = new THREE.AmbientLight(0x242424);
 66 |         scene.add(ambiLight);
 67 | 
 68 |         var light = new THREE.SpotLight();
 69 |         light.position.set(0, 30, 30);
 70 |         light.intensity = 1.2;
 71 |         scene.add(light);
 72 | 
 73 | 
 74 |         var pointColor = "#ff5808";
 75 |         var directionalLight = new THREE.PointLight(pointColor);
 76 | 
 77 | 
 78 | 
 79 | 
 80 |         scene.add(directionalLight);
 81 | 
 82 | 
 83 |         var sphereLight = new THREE.SphereGeometry(0.2);
 84 |         var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});
 85 |         var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
 86 |         sphereLightMesh.castShadow = true;
 87 | 
 88 |         sphereLightMesh.position = new THREE.Vector3(3, 3, 3);
 89 |         scene.add(sphereLightMesh);
 90 | 
 91 |         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
 92 | 
 93 |         var step = 0;
 94 | 
 95 | 
 96 |         var controls = new function () {
 97 |             this.normalScale = 1;
 98 |             this.changeTexture = "plaster";
 99 |             this.rotate = false;
100 | 
101 |             this.changeTexture = function (e) {
102 |                 var texture = THREE.ImageUtils.loadTexture("./images/" + e + ".jpg");
103 |                 sphere2.material.map = texture;
104 |                 sphere1.material.map = texture;
105 | 
106 |                 var bump = THREE.ImageUtils.loadTexture("./images/" + e + "-normal.jpg");
107 |                 sphere2.material.normalMap = bump;
108 |             };
109 | 
110 |             this.updateBump = function (e) {
111 |                 sphere2.material.normalScale.set(e, e);
112 |             }
113 |         };
114 | 
115 | 
116 |         var gui = new dat.GUI();
117 |         gui.add(controls, "normalScale", -2, 2).onChange(controls.updateBump);
118 |         gui.add(controls, "changeTexture", ['plaster', 'bathroom', 'metal-floor']).onChange(controls.changeTexture);
119 |         gui.add(controls, "rotate");
120 | 
121 | 
122 |         render();
123 | 
124 |         function createMesh(geom, imageFile, normal) {
125 | 
126 |             if (normal) {
127 |                 var t = THREE.ImageUtils.loadTexture("./images/" + imageFile);
128 |                 var m = THREE.ImageUtils.loadTexture("./images/" + normal);
129 |                 var mat2 = new THREE.MeshPhongMaterial();
130 |                 mat2.map = t;
131 |                 mat2.normalMap = m;
132 | 
133 |                 var mesh = new THREE.Mesh(geom, mat2);
134 |                 return mesh;
135 |             } else {
136 |                 var t = THREE.ImageUtils.loadTexture("./images/" + imageFile);
137 |                 var mat1 = new THREE.MeshPhongMaterial({
138 |                     map: t
139 |                 });
140 |                 var mesh = new THREE.Mesh(geom, mat1);
141 |                 return mesh;
142 |             }
143 | 
144 |             return mesh;
145 |         }
146 | 
147 |         function createNormalmapShaderMaterial(diffuseMap, normalMap) {
148 |             var shader = THREE.ShaderLib["normalmap"];
149 |             var uniforms = THREE.UniformsUtils.clone(shader.uniforms);
150 | 
151 |             var dT = THREE.ImageUtils.loadTexture(diffuseMap);
152 |             var nT = THREE.ImageUtils.loadTexture(normalMap);
153 | 
154 |             uniforms["uShininess"].value = 50;
155 |             uniforms["enableDiffuse"].value = true;
156 |             uniforms["uDiffuseColor"].value.setHex(0xffffff);
157 |             uniforms["tDiffuse"].value = dT;
158 |             uniforms["tNormal"].value = nT;
159 | 
160 |             uniforms["uNormalScale"].value.set(1, 1);
161 |             uniforms["uSpecularColor"].value.setHex(0xffffff);
162 |             uniforms["enableSpecular"].value = true;
163 | 
164 |             return new THREE.ShaderMaterial(
165 |                     {
166 |                         fragmentShader: shader.fragmentShader,
167 |                         vertexShader: shader.vertexShader,
168 |                         uniforms: uniforms,
169 |                         lights: true
170 |                     });
171 |         }
172 | 
173 |         var invert = 1;
174 |         var phase = 0;
175 | 
176 |         function render() {
177 |             stats.update();
178 |             step += 0.1;
179 | 
180 |             if (controls.rotate) {
181 |                 sphere1.rotation.y -= 0.01;
182 |                 sphere2.rotation.y += 0.01;
183 |             }
184 | 
185 | 
186 |             if (phase > 2 * Math.PI) {
187 |                 invert = invert * -1;
188 |                 phase -= 2 * Math.PI;
189 |             } else {
190 |                 phase += 0.03;
191 |             }
192 | 
193 |             sphereLightMesh.position.z = +(21 * (Math.sin(phase)));
194 |             sphereLightMesh.position.x = -14 + (14 * (Math.cos(phase)));
195 | 
196 |             if (invert < 0) {
197 |                 var pivot = 0;
198 |                 sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;
199 |             }
200 | 
201 |             directionalLight.position.copy(sphereLightMesh.position);
202 | 
203 |             requestAnimationFrame(render);
204 |             webGLRenderer.render(scene, camera);
205 |         }
206 | 
207 | 
208 |         function initStats() {
209 | 
210 |             var stats = new Stats();
211 |             stats.setMode(0); 
212 | 
213 |             stats.domElement.style.position = 'absolute';
214 |             stats.domElement.style.left = '0px';
215 |             stats.domElement.style.top = '0px';
216 | 
217 |             document.getElementById("Stats-output").appendChild(stats.domElement);
218 | 
219 |             return stats;
220 |         }
221 |     };
222 | 
223 |     window.onload = init;
224 | 
225 | 
226 | </script>
227 | </body>
228 | </html>


--------------------------------------------------------------------------------
/pointCloud.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>pointCloud</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <style>
 12 |         body {
 13 |             margin: 0;
 14 |             overflow: hidden;
 15 |             background-color: #000000;
 16 |         }
 17 |     </style>
 18 | </head>
 19 | <body>
 20 | 
 21 | <div id="Stats-output">
 22 | </div>
 23 | <div id="WebGL-output">
 24 | </div>
 25 | 
 26 | <script type="text/javascript">
 27 | 
 28 |     function init() {
 29 | 
 30 |         var stats = initStats();
 31 | 
 32 |         var scene = new THREE.Scene();
 33 | 
 34 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 35 | 
 36 |         var webGLRenderer = new THREE.WebGLRenderer();
 37 |         webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
 38 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 39 | 
 40 |         camera.position.x = 20;
 41 |         camera.position.y = 0;
 42 |         camera.position.z = 150;
 43 | 
 44 |         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
 45 | 
 46 |         var cloud;
 47 | 
 48 |         var controls = new function () {
 49 |             this.size = 4;
 50 |             this.transparent = true;
 51 |             this.opacity = 0.6;
 52 |             this.vertexColors = true;
 53 |             this.color = 0xffffff;
 54 |             this.sizeAttenuation = true;
 55 |             this.rotateSystem = true;
 56 | 
 57 |             this.redraw = function () {
 58 |                 if (scene.getObjectByName("particles")) {
 59 |                     scene.remove(scene.getObjectByName("particles"));
 60 |                 }
 61 |                 createParticles(controls.size, controls.transparent, controls.opacity, controls.vertexColors, controls.sizeAttenuation, controls.color);
 62 |             };
 63 |         };
 64 | 
 65 |         var gui = new dat.GUI();
 66 |         gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
 67 |         gui.add(controls, 'transparent').onChange(controls.redraw);
 68 |         gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw);
 69 |         gui.add(controls, 'vertexColors').onChange(controls.redraw);
 70 |         gui.addColor(controls, 'color').onChange(controls.redraw);
 71 |         gui.add(controls, 'sizeAttenuation').onChange(controls.redraw);
 72 |         gui.add(controls, 'rotateSystem');
 73 | 
 74 |         controls.redraw();
 75 |         render();
 76 | 
 77 |         function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {
 78 | 
 79 | 
 80 |             var geom = new THREE.Geometry();
 81 |             var material = new THREE.PointCloudMaterial({
 82 |                 size: size,
 83 |                 transparent: transparent,
 84 |                 opacity: opacity,
 85 |                 vertexColors: vertexColors,
 86 | 
 87 |                 sizeAttenuation: sizeAttenuation,
 88 |                 color: color
 89 |             });
 90 | 
 91 | 
 92 |             var range = 500;
 93 |             for (var i = 0; i < 15000; i++) {
 94 |                 var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
 95 |                 geom.vertices.push(particle);
 96 |                 var color = new THREE.Color(0x00ff00);
 97 |                 color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
 98 |                 geom.colors.push(color);
 99 | 
100 |             }
101 | 
102 |             cloud = new THREE.PointCloud(geom, material);
103 |             cloud.name = "particles";
104 |             scene.add(cloud);
105 |         }
106 | 
107 | 
108 |         var step = 0;
109 | 
110 |         function render() {
111 | 
112 |             stats.update();
113 | 
114 |             if (controls.rotateSystem) {
115 |                 step += 0.01;
116 | 
117 |                 cloud.rotation.x = step;
118 |                 cloud.rotation.z = step;
119 |             }
120 | 
121 | 
122 |             requestAnimationFrame(render);
123 |             webGLRenderer.render(scene, camera);
124 |         }
125 | 
126 |         function initStats() {
127 | 
128 |             var stats = new Stats();
129 |             stats.setMode(0);
130 | 
131 |             stats.domElement.style.position = 'absolute';
132 |             stats.domElement.style.left = '0px';
133 |             stats.domElement.style.top = '0px';
134 | 
135 |             document.getElementById("Stats-output").appendChild(stats.domElement);
136 | 
137 |             return stats;
138 |         }
139 |     }
140 |     window.onload = init;
141 | </script>
142 | </body>
143 | </html>


--------------------------------------------------------------------------------
/rainyScene.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>rainyScene</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <style>
 12 |         body {
 13 |             margin: 0;
 14 |             overflow: hidden;
 15 |             background-color: #000000;
 16 |         }
 17 |     </style>
 18 | </head>
 19 | <body>
 20 | 
 21 | <div id="Stats-output">
 22 | </div>
 23 | <div id="WebGL-output">
 24 | </div>
 25 | 
 26 | <script type="text/javascript">
 27 | 
 28 |     function init() {
 29 | 
 30 |         var stats = initStats();
 31 | 
 32 |         // create 场景
 33 |         var scene = new THREE.Scene();
 34 | 
 35 |         // create 相机
 36 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
 37 | 
 38 |         // create 渲染器
 39 |         var webGLRenderer = new THREE.WebGLRenderer();
 40 |         webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
 41 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 42 | 
 43 |         // 定位
 44 |         camera.position.x = 20;
 45 |         camera.position.y = 40;
 46 |         camera.position.z = 110;
 47 |         camera.lookAt(new THREE.Vector3(20, 30, 0));
 48 | 
 49 |         // 添加到容器
 50 |         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
 51 | 
 52 |         var system1;
 53 |         var cloud;
 54 | 
 55 |         var controls = new function () {
 56 |             this.size = 3;
 57 |             this.transparent = true;
 58 |             this.opacity = 0.6;
 59 |             this.color = 0xffffff;
 60 | 
 61 |             this.sizeAttenuation = true;
 62 | 
 63 |             this.redraw = function () {
 64 |                 scene.remove(scene.getObjectByName("particles1"));
 65 |                 scene.remove(scene.getObjectByName("particles2"));
 66 | 
 67 |                 createPointCloud(controls.size, controls.transparent, controls.opacity, controls.sizeAttenuation, controls.color);
 68 |             };
 69 |         };
 70 | 
 71 |         var gui = new dat.GUI();
 72 |         gui.add(controls, 'size', 0, 20).onChange(controls.redraw);
 73 |         gui.add(controls, 'transparent').onChange(controls.redraw);
 74 |         gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw);
 75 |         gui.addColor(controls, 'color').onChange(controls.redraw);
 76 |         gui.add(controls, 'sizeAttenuation').onChange(controls.redraw);
 77 | 
 78 |         controls.redraw();
 79 | 
 80 |         render();
 81 | 
 82 | 
 83 |         function createPointCloud(size, transparent, opacity, sizeAttenuation, color) {
 84 | 
 85 |             var texture = THREE.ImageUtils.loadTexture("./images/raindrop.png");
 86 |             var geom = new THREE.Geometry();
 87 | 
 88 |             var material = new THREE.ParticleBasicMaterial({
 89 |                 size: size,
 90 |                 transparent: transparent,
 91 |                 opacity: opacity,
 92 |                 map: texture,
 93 |                 blending: THREE.AdditiveBlending,
 94 |                 sizeAttenuation: sizeAttenuation,
 95 |                 color: color
 96 |             });
 97 | 
 98 | 
 99 |             var range = 40;
100 |             for (var i = 0; i < 1500; i++) {
101 |                 var particle = new THREE.Vector3(   //创建3D坐标
102 |                         Math.random() * range - range / 2,
103 |                         Math.random() * range * 1.5,
104 |                         Math.random() * range - range / 2);
105 |                 particle.velocityY = 0.1 + Math.random() / 5;
106 |                 particle.velocityX = (Math.random() - 0.5) / 3;
107 |                 geom.vertices.push(particle);
108 |             }
109 | 
110 |             cloud = new THREE.ParticleSystem(geom, material);
111 |             cloud.sortParticles = true;
112 | 
113 |             scene.add(cloud);
114 |         }
115 | 
116 |         function render() {
117 |             stats.update();
118 |             var vertices = cloud.geometry.vertices;
119 |             vertices.forEach(function (v) {
120 |                 v.y = v.y - (v.velocityY);
121 |                 v.x = v.x - (v.velocityX);
122 | 
123 |                 if (v.y <= 0) v.y = 60;
124 |                 if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1;
125 |             });
126 | 
127 |             requestAnimationFrame(render);
128 |             webGLRenderer.render(scene, camera);
129 |         }
130 | 
131 |         function initStats() {
132 | 
133 |             var stats = new Stats();
134 |             stats.setMode(0); 
135 | 
136 |             stats.domElement.style.position = 'absolute';
137 |             stats.domElement.style.left = '0px';
138 |             stats.domElement.style.top = '0px';
139 | 
140 |             document.getElementById("Stats-output").appendChild(stats.domElement);
141 | 
142 |             return stats;
143 |         }
144 | 
145 | 
146 |     }
147 |     window.onload = init;
148 | </script>
149 | </body>
150 | </html>


--------------------------------------------------------------------------------
/snowyScene.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>snowyScene</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <style>
 12 |         body {
 13 |             margin: 0;
 14 |             overflow: hidden;
 15 |             background-color: #000000;
 16 |         }
 17 |     </style>
 18 | </head>
 19 | <body>
 20 | 
 21 | <div id="Stats-output">
 22 | </div>
 23 | <!-- 容器 -->
 24 | <div id="WebGL-output">
 25 | </div>
 26 | 
 27 | <script type="text/javascript">
 28 | 
 29 |     function init() {
 30 | 
 31 |         var stats = initStats();
 32 | 
 33 |         var scene = new THREE.Scene();
 34 | 
 35 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
 36 | 
 37 |         var webGLRenderer = new THREE.WebGLRenderer();
 38 |         webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
 39 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 40 | 
 41 |         camera.position.x = 20;
 42 |         camera.position.y = 40;
 43 |         camera.position.z = 110;
 44 |         camera.lookAt(new THREE.Vector3(20, 30, 0));
 45 | 
 46 |         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
 47 | 
 48 |         var system1;
 49 |         var system2;
 50 | 
 51 |         var controls = new function () {
 52 |             this.size = 10;
 53 |             this.transparent = true;
 54 |             this.opacity = 0.6;
 55 |             this.color = 0xffffff;
 56 | 
 57 |             this.sizeAttenuation = true;
 58 | 
 59 |             this.redraw = function () {
 60 |                 var toRemove = [];
 61 |                 scene.children.forEach(function (child) {
 62 |                     if (child instanceof THREE.PointCloud) {
 63 |                         toRemove.push(child);
 64 |                     }
 65 |                 });
 66 |                 toRemove.forEach(function (child) {
 67 |                     scene.remove(child)
 68 |                 });
 69 |                 createPointClouds(controls.size, controls.transparent, controls.opacity, controls.sizeAttenuation, controls.color);
 70 |             };
 71 |         };
 72 | 
 73 |         var gui = new dat.GUI();
 74 |         gui.add(controls, 'size', 0, 20).onChange(controls.redraw);
 75 |         gui.add(controls, 'transparent').onChange(controls.redraw);
 76 |         gui.add(controls, 'opacity', 0, 1).onChange(controls.redraw);
 77 |         gui.addColor(controls, 'color').onChange(controls.redraw);
 78 |         gui.add(controls, 'sizeAttenuation').onChange(controls.redraw);
 79 | 
 80 |         controls.redraw();
 81 | 
 82 |         render();
 83 | 
 84 |         function createPointCloud(name, texture, size, transparent, opacity, sizeAttenuation, color) {
 85 |             var geom = new THREE.Geometry();
 86 | 
 87 |             var color = new THREE.Color(color);
 88 |             color.setHSL(color.getHSL().h,
 89 |                     color.getHSL().s,
 90 |                     (Math.random()) * color.getHSL().l);
 91 | 
 92 |             var material = new THREE.PointCloudMaterial({
 93 |                 size: size,
 94 |                 transparent: transparent,
 95 |                 opacity: opacity,
 96 |                 map: texture,
 97 |                 blending: THREE.AdditiveBlending,
 98 |                 depthWrite: false,
 99 |                 sizeAttenuation: sizeAttenuation,
100 |                 color: color
101 |             });
102 | 
103 |             var range = 40;
104 |             for (var i = 0; i < 50; i++) {
105 |                 var particle = new THREE.Vector3(
106 |                         Math.random() * range - range / 2,
107 |                         Math.random() * range * 1.5,
108 |                         Math.random() * range - range / 2);
109 |                 particle.velocityY = 0.1 + Math.random() / 5;
110 |                 particle.velocityX = (Math.random() - 0.5) / 3;
111 |                 particle.velocityZ = (Math.random() - 0.5) / 3;
112 |                 geom.vertices.push(particle);
113 |             }
114 | 
115 |             var system = new THREE.PointCloud(geom, material);
116 |             system.name = name;
117 |             system.sortParticles = true;
118 |             return system;
119 |         }
120 | 
121 |         function createPointClouds(size, transparent, opacity, sizeAttenuation, color) {
122 | 
123 |             var texture1 = THREE.ImageUtils.loadTexture("./images/snowflake1.png");
124 |             var texture2 = THREE.ImageUtils.loadTexture("./images/snowflake2.png");
125 |             var texture3 = THREE.ImageUtils.loadTexture("./images/snowflake3.png");
126 |             var texture4 = THREE.ImageUtils.loadTexture("./images/snowflake5.png");
127 | 
128 |             scene.add(createPointCloud("system1", texture1, size, transparent, opacity, sizeAttenuation, color));
129 |             scene.add(createPointCloud("system2", texture2, size, transparent, opacity, sizeAttenuation, color));
130 |             scene.add(createPointCloud("system3", texture3, size, transparent, opacity, sizeAttenuation, color));
131 |             scene.add(createPointCloud("system4", texture4, size, transparent, opacity, sizeAttenuation, color));
132 |         }
133 | 
134 | 
135 |         function render() {
136 | 
137 |             stats.update();
138 | 
139 |             scene.children.forEach(function (child) {
140 |                 if (child instanceof THREE.PointCloud) {
141 |                     var vertices = child.geometry.vertices;
142 |                     vertices.forEach(function (v) {
143 |                         v.y = v.y - (v.velocityY);
144 |                         v.x = v.x - (v.velocityX);
145 |                         v.z = v.z - (v.velocityZ);
146 | 
147 |                         if (v.y <= 0) v.y = 60;
148 |                         if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1;
149 |                         if (v.z <= -20 || v.z >= 20) v.velocityZ = v.velocityZ * -1;
150 |                     });
151 |                 }
152 |             });
153 | 
154 |             requestAnimationFrame(render);
155 |             webGLRenderer.render(scene, camera);
156 |         }
157 | 
158 |         function initStats() {
159 | 
160 |             var stats = new Stats();
161 |             stats.setMode(0); 
162 | 
163 |             stats.domElement.style.position = 'absolute';
164 |             stats.domElement.style.left = '0px';
165 |             stats.domElement.style.top = '0px';
166 | 
167 |             document.getElementById("Stats-output").appendChild(stats.domElement);
168 | 
169 |             return stats;
170 |         }
171 | 
172 | 
173 |     }
174 |     window.onload = init;
175 | </script>
176 | </body>
177 | </html>


--------------------------------------------------------------------------------
/textGeometry.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | 
  5 | <head>
  6 |     <title>Text geometry</title>
  7 |     <script type="text/javascript" src="./libs/three.js"></script>
  8 | 
  9 |     <script type="text/javascript" src="./libs/stats.js"></script>
 10 |     <script type="text/javascript" src="./libs/dat.gui.js"></script>
 11 |     <script type="text/javascript" src="./libs/fonts/helvetiker_regular.typeface.js"></script>
 12 |     <script type="text/javascript" src="./libs/fonts/helvetiker_bold.typeface.js"></script>
 13 |     <script type="text/javascript" src="./libs/fonts/bitstream_vera_sans_mono_roman.typeface.js"></script>
 14 | 
 15 |     <style>
 16 |         body {
 17 |             margin: 0;
 18 |             overflow: hidden;
 19 |         }
 20 |     </style>
 21 | </head>
 22 | <body>
 23 | 
 24 | <div id="Stats-output">
 25 | </div>
 26 | <!-- 容器 -->
 27 | <div id="WebGL-output">
 28 | </div>
 29 | 
 30 | <script type="text/javascript">
 31 | 
 32 |     function init() {
 33 | 
 34 |         var stats = initStats();
 35 | 
 36 |         var scene = new THREE.Scene();
 37 | 
 38 |         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
 39 | 
 40 |         var webGLRenderer = new THREE.WebGLRenderer();
 41 |         webGLRenderer.setClearColor(new THREE.Color(0x000000, 1.0));
 42 |         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
 43 |         webGLRenderer.shadowMapEnabled = true;
 44 | 
 45 |         camera.position.x = 100;
 46 |         camera.position.y = 300;
 47 |         camera.position.z = 600;
 48 |         camera.lookAt(new THREE.Vector3(400, 0, -300));
 49 | 
 50 |         var dirLight = new THREE.DirectionalLight();
 51 |         dirLight.position.set(25, 23, 15);
 52 |         scene.add(dirLight);
 53 | 
 54 | 
 55 |         var dirLight2 = new THREE.DirectionalLight();
 56 |         dirLight2.position.set(-25, 23, 15);
 57 |         scene.add(dirLight2);
 58 | 
 59 |         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
 60 | 
 61 |         var step = 0;
 62 | 
 63 | 
 64 |         var text1;
 65 |         var text2;
 66 | 
 67 |         var controls = new function () {
 68 | 
 69 |             this.size = 90;
 70 |             this.height = 90;
 71 |             this.bevelThickness = 2;
 72 |             this.bevelSize = 0.5;
 73 |             this.bevelEnabled = true;
 74 |             this.bevelSegments = 3;
 75 |             this.bevelEnabled = true;
 76 |             this.curveSegments = 12;
 77 |             this.steps = 1;
 78 |             this.font = "helvetiker";
 79 |             this.weight = "normal";
 80 | //            this.style = "italics";
 81 | 
 82 |             this.asGeom = function () {
 83 |                 scene.remove(text1);
 84 |                 scene.remove(text2);
 85 | 
 86 |                 var options = {
 87 |                     size: controls.size,
 88 |                     height: controls.height,
 89 |                     weight: controls.weight,
 90 |                     font: controls.font,
 91 |                     bevelThickness: controls.bevelThickness,
 92 |                     bevelSize: controls.bevelSize,
 93 |                     bevelSegments: controls.bevelSegments,
 94 |                     bevelEnabled: controls.bevelEnabled,
 95 |                     curveSegments: controls.curveSegments,
 96 |                     steps: controls.steps
 97 |                 };
 98 | 
 99 |                 console.log(THREE.FontUtils.faces);
100 | 
101 |                 text1 = createMesh(new THREE.TextGeometry("Zou", options));
102 |                 text1.position.z = -100;
103 |                 text1.position.y = 100;
104 |                 scene.add(text1);
105 | 
106 |                 text2 = createMesh(new THREE.TextGeometry("yang1230", options));
107 |                 scene.add(text2);
108 |             };
109 | 
110 |         };
111 | 
112 |         controls.asGeom();
113 | 
114 |         var gui = new dat.GUI();
115 |         gui.add(controls, 'size', 0, 200).onChange(controls.asGeom);
116 |         gui.add(controls, 'height', 0, 200).onChange(controls.asGeom);
117 |         gui.add(controls, 'font', ['bitstream vera sans mono', 'helvetiker']).onChange(controls.asGeom);
118 |         gui.add(controls, 'bevelThickness', 0, 10).onChange(controls.asGeom);
119 |         gui.add(controls, 'bevelSize', 0, 10).onChange(controls.asGeom);
120 |         gui.add(controls, 'bevelSegments', 0, 30).step(1).onChange(controls.asGeom);
121 |         gui.add(controls, 'bevelEnabled').onChange(controls.asGeom);
122 |         gui.add(controls, 'curveSegments', 1, 30).step(1).onChange(controls.asGeom);
123 |         gui.add(controls, 'steps', 1, 5).step(1).onChange(controls.asGeom);
124 | 
125 | 
126 |         render();
127 | 
128 | 
129 |         function createMesh(geom) {
130 | 
131 | //            var meshMaterial = new THREE.MeshLambertMaterial({color: 0xff5555});
132 | //            var meshMaterial = new THREE.MeshNormalMaterial();
133 |             var meshMaterial = new THREE.MeshPhongMaterial({
134 |                 specular: 0xffffff,
135 |                 color: 0xeeffff,
136 |                 shininess: 100,
137 |                 metal: true
138 |             });
139 | //            meshMaterial.side=THREE.DoubleSide;
140 |             var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial]);
141 | 
142 |             return plane;
143 |         }
144 | 
145 |         function render() {
146 |             stats.update();
147 |             requestAnimationFrame(render);
148 |             webGLRenderer.render(scene, camera);
149 |         }
150 | 
151 |         function initStats() {
152 | 
153 |             var stats = new Stats();
154 |             stats.setMode(0); 
155 | 
156 | 
157 |             stats.domElement.style.position = 'absolute';
158 |             stats.domElement.style.left = '0px';
159 |             stats.domElement.style.top = '0px';
160 | 
161 |             document.getElementById("Stats-output").appendChild(stats.domElement);
162 | 
163 |             return stats;
164 |         }
165 |     }
166 |     window.onload = init;
167 | </script>
168 | </body>
169 | </html>


--------------------------------------------------------------------------------