首頁 探索 說明
登入
javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

Merge remote-tracking branch 'mrdoob/dev' into dev

Daniel 9 年之前
父節點
9c0f3460b9 4024d52dee
當前提交
9841cb2b1c
共有 15 個文件被更改，包括 731 次插入 和 117 次删除
分割檢視 顯示文件統計
  1. 0 0
      build/three.js
  2. 0 0
      build/three.min.js
  3. 0 88
      docs/api/extras/ImageUtils.html
  4. 11 13
      docs/api/textures/CubeTexture.html
  5. 0 1
      docs/list.js
  6. 2 1
      editor/index.html
  7. 18 0
      editor/js/Loader.js
  8. 1 1
      examples/js/loaders/BabylonLoader.js
  9. 174 0
      examples/js/loaders/PlayCanvasLoader.js
  10. 247 0
      examples/webgl_materials_basic_variations.html
  11. 248 0
      examples/webgl_materials_lambert_variations.html
  12. 15 6
      examples/webgl_materials_phong_variations.html
  13. 11 3
      examples/webgl_materials_physical_variations.html
  14. 1 1
      src/renderers/shaders/ShaderChunk/envmap_pars_fragment.glsl
  15. 3 3
      utils/build/build.py

File diff suppressed because it is too large
+ 0 - 0
build/three.js


File diff suppressed because it is too large
+ 0 - 0
build/three.min.js


+ 0 - 88
docs/api/extras/ImageUtils.html
查看文件 

@@ -1,88 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<meta charset="utf-8" />

-		<base href="../../" />
 
-		<script src="list.js"></script>
 
-		<script src="page.js"></script>
 
-		<link type="text/css" rel="stylesheet" href="page.css" />
 
-	</head>
 
-	<body>
 
-		<h1>[name]</h1>
 
-
 
-		<div class="desc">A Helper class to ease the loading of images of different types.</div>
 
-		
-
 
-		<h2>Properties</h2>
 
-
 
-
 
-
 
-		<h3>[property:string crossOrigin]</h3>
 
-		<div>
 
-		The crossOrigin string to implement CORS for loading the image from a different domain that allows CORS.
 
-		</div> 
-
 
-		<h2>Methods</h2>
 
-
 
-
 
-
 
-		<h3>[method:DataTexture generateDataTexture]([page:Number width], [page:Number height], [page:Number color])</h3>
 
-		<div>
 
-		width -- The width of the texture. <br />
 
-		height -- The height of the texture. <br />
 
-		color -- The hexadecimal value of the color.
 
-		</div>
 
-		<div>
 
-		Generates a texture of a single color. It is a DataTexture with format, RGBFormat.
 
-		</div>
 
-
 
-		<h3>[method:CompressedTexture parseDDS]([page:String buffer], [page:boolean loadMipmaps])</h3>
 
-		<div>
 
-		buffer -- A string containing the data of the dds. <br />
 
-		loadMipmaps -- A boolean to indicate if you need to load the mipmaps. Default is True.
 
-		</div>
 
-		<div>
 
-		Parses a DDS Image from the string into a CompressedTexture. 
-		</div>
 
-
 
-		<h3>[method:Texture loadTexture]([page:String url], [page:UVMapping mapping], [page:Function onLoad], [page:Function onError])</h3>
 
-		<div>
 
-		url -- the url of the texture<br />
 
-		mapping -- Can be an instance of [page:UVMapping THREE.UVMapping], [page:CubeReflectionMapping THREE.CubeReflectionMapping] or [page:SphericalReflectionMapping THREE.SphericalReflectionMapping]. Describes how the image is applied to the object.<br />Use undefined instead of null as a default value. See mapping property of [page:Texture texture] for more details. <br/>
 
-		onLoad -- callback function<br />
 
-		onError -- callback function
 
-		</div>
 
-		<div>
 
-		A helper function to generates a [page:Texture THREE.Texture] from an image URL. Provides a load and error
 
-		callback.
 
-		</div>
 
-
 
-		<h3>[method:canvas getNormalMap]([page:Image image], [page:Float depth])</h3>
 
-		<div>
 
-		image -- A loaded image element <br />
 
-		depth -- The depth of the normal map. Defaults to between -1 and 1.
 
-		</div>
 
-		<div>
 
-		Translates an image element into a normal map with the range (-1, -1, -1) to (1, 1, 1) multiplied by the depth.
 
-		Returns a canvas element.
 
-		</div>
 
-
 
-		<h3>[method:CubeTexture loadTextureCube]([page:Array array], [page:Textures mapping], [page:function onLoad], [page:function onError])</h3>
 
-		<div>
 
-		array -- An array of 6 images <br />
 
-		mapping -- Either [page:Textures THREE.CubeReflectionMapping] or [page:Textures THREE.CubeRefractionMapping]<br />
 
-		onLoad -- callback <br />
 
-		onError -- callback
 
-		</div>
 
-		<div>
 
-		Creates a [page:CubeTexture] from 6 images.<br /><br />
 
-		
-		The images are loaded in the following order where p is positiive and n is negative: [ px, nx, py, ny, pz, nz ].
 
-		See [page:CubeTexture] for an example in code.
 
-		</div>
 
-
 
-		<h2>Source</h2>
 
-
 
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 
-	</body>
 
-</html>

+ 11 - 13
docs/api/textures/CubeTexture.html
查看文件 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />

+		<meta charset="utf-8" />
 
 		<base href="../../" />
 
 		<script src="list.js"></script>
 
 		<script src="page.js"></script>
 
@@ -17,15 +17,15 @@
 
 		<h2>Example</h2>
 
 
 		<code>
 
-		var path = "textures/cube/pisa/";
 
-		var format = '.png';
 
-		var urls = [
 
-			path + 'px' + format, path + 'nx' + format,
 
-			path + 'py' + format, path + 'ny' + format,
 
-			path + 'pz' + format, path + 'nz' + format
 
-		];
 
-
 
-		var textureCube = THREE.ImageUtils.loadTextureCube( urls );
 
+		var loader = new THREE.CubeTextureLoader();
 
+		loader.setPath( 'textures/cube/pisa/' );
 
+		
+		var textureCube = loader.load( [
 
+			'px.png', 'nx.png',
 
+			'py.png', 'ny.png',
 
+			'pz.png', 'nz.png'
 
+		] );
 
+
 
 		var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
 		</code>
 
 
@@ -37,9 +37,7 @@
 
 		<div>
 
 		CubeTexture is almost equivalent in functionality and usage to [page:Texture]. The only differences are that the
 
 		images are an array of 6 images as opposed to a single image, and the mapping options are
 
-		[page:Textures THREE.CubeReflectionMapping] (default) or [page:Textures THREE.CubeRefractionMapping]<br />
 
-		<br />
 
-		Generally [page:ImageUtils.loadTextureCube] is used instead of using CubeTexture directly.
 
+		[page:Textures THREE.CubeReflectionMapping] (default) or [page:Textures THREE.CubeRefractionMapping]
 
 		</div>

+ 0 - 1
docs/list.js
查看文件 

@@ -159,7 +159,6 @@ var list = {
 
 		"Extras": [
 
 			[ "FontUtils", "api/extras/FontUtils" ],
 
 			[ "GeometryUtils", "api/extras/GeometryUtils" ],
 
-			[ "ImageUtils", "api/extras/ImageUtils" ],
 
 			[ "SceneUtils", "api/extras/SceneUtils" ]
 
 		],

+ 2 - 1
editor/index.html
查看文件 

@@ -23,6 +23,7 @@
 
 		<script src="../examples/js/loaders/KMZLoader.js"></script>
 
 		<script src="../examples/js/loaders/MD2Loader.js"></script>
 
 		<script src="../examples/js/loaders/OBJLoader.js"></script>
 
+		<script src="../examples/js/loaders/PlayCanvasLoader.js"></script>
 
 		<script src="../examples/js/loaders/PLYLoader.js"></script>
 
 		<script src="../examples/js/loaders/STLLoader.js"></script>
 
 		<script src="../examples/js/loaders/UTF8Loader.js"></script>
 
@@ -288,7 +289,7 @@
 
 						if ( parent !== null ) editor.execute( new CmdRemoveObject( object ) );
 
 
 						break;
 
-						
+
 
 					case 90: // Register Ctrl-Z for Undo, Ctrl-Shift-Z for Redo
 
 
 						if ( event.ctrlKey && event.shiftKey ) {

+ 18 - 0
editor/js/Loader.js
查看文件 

@@ -252,6 +252,24 @@ var Loader = function ( editor ) {
 
 
 				break;
 
 
+			case 'playcanvas':
 
+
 
+				var reader = new FileReader();
 
+				reader.addEventListener( 'load', function ( event ) {
 
+
 
+					var contents = event.target.result;
 
+					var json = JSON.parse( contents );
 
+
 
+					var loader = new THREE.PlayCanvasLoader();
 
+					var object = loader.parse( json );
 
+
 
+					editor.execute( new CmdAddObject( object ) );
 
+
 
+				}, false );
 
+				reader.readAsText( file );
 
+
 
+				break;
 
+
 
 			case 'ply':
 
 
 				var reader = new FileReader();

+ 1 - 1
examples/js/loaders/BabylonLoader.js
查看文件 

@@ -10,7 +10,7 @@ THREE.BabylonLoader = function ( manager ) {
 
 
 THREE.BabylonLoader.prototype = {
 
 
-	constructor: THREE.ObjectLoader,
 
+	constructor: THREE.BabylonLoader,
 
 
 	load: function ( url, onLoad, onProgress, onError ) {

+ 174 - 0
examples/js/loaders/PlayCanvasLoader.js
查看文件 

@@ -0,0 +1,174 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ */
 
+
 
+THREE.PlayCanvasLoader = function ( manager ) {
 
+
 
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
 
+
 
+};
 
+
 
+THREE.PlayCanvasLoader.prototype = {
 
+
 
+	constructor: THREE.PlayCanvasLoader,
 
+
 
+	load: function ( url, onLoad, onProgress, onError ) {
 
+
 
+		var scope = this;
 
+
 
+		var loader = new THREE.XHRLoader( scope.manager );
 
+		loader.setCrossOrigin( this.crossOrigin );
 
+		loader.load( url, function ( text ) {
 
+
 
+			onLoad( scope.parse( JSON.parse( text ) ) );
 
+
 
+		}, onProgress, onError );
 
+
 
+	},
 
+
 
+	parse: function ( json ) {
 
+
 
+		function parseVertices( data ) {
 
+
 
+			var attributes = {};
 
+
 
+			for ( var name in data ) {
 
+
 
+				var attribute = data[ name ];
 
+
 
+				var type = attribute.type;
 
+				var size = attribute.components;
 
+
 
+				var array;
 
+
 
+				if ( type === 'float32' ) array = new Float32Array( attribute.data );
 
+				if ( array === undefined ) console.log( 'PlayCanvasLoader: TODO', type );
 
+
 
+				attributes[ name ] = new THREE.BufferAttribute( array, size );
 
+
 
+			}
 
+
 
+			data._attributes = attributes;
 
+
 
+		}
 
+
 
+		function parseMeshes( data ) {
 
+
 
+			var geometry = new THREE.BufferGeometry();
 
+
 
+			geometry.setIndex( new THREE.Uint16Attribute( data.indices, 1 ) );
 
+
 
+			var attributes = model.vertices[ data.vertices ]._attributes;
 
+
 
+			for ( var name in attributes ) {
 
+
 
+				var attribute = attributes[ name ];
 
+
 
+				if ( name === 'texCoord0' ) name = 'uv';
 
+
 
+				geometry.addAttribute( name, attribute );
 
+
 
+			}
 
+
 
+			data._geometry = geometry;
 
+
 
+		}
 
+
 
+		function parseMeshInstances( data ) {
 
+
 
+			var node = model.nodes[ data.node ];
 
+			var mesh = model.meshes[ data.mesh ];
 
+
 
+			if ( node._geometries === undefined ) {
 
+
 
+				node._geometries = [];
 
+
 
+			}
 
+
 
+			node._geometries.push( mesh._geometry );
 
+
 
+		}
 
+
 
+		function parseNodes( data ) {
 
+
 
+			var object = new THREE.Group();
 
+			object.name = data.name;
 
+
 
+			if ( data._geometries !== undefined ) {
 
+
 
+				var material = new THREE.MeshPhongMaterial();
 
+
 
+				for ( var i = 0; i < data._geometries.length; i ++ ) {
 
+
 
+					var geometry = data._geometries[ i ];
 
+
 
+					object.add( new THREE.Mesh( geometry, material ) );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			for ( var i = 0; i < data.rotation.length; i ++ ) {
 
+				data.rotation[ i ] *= Math.PI / 180;
 
+			}
 
+
 
+			object.position.fromArray( data.position );
 
+			object.rotation.fromArray( data.rotation );
 
+			object.scale.fromArray( data.scale );
 
+
 
+			data._object = object;
 
+
 
+		}
 
+
 
+		//
 
+
 
+		console.log( json );
 
+
 
+		var model = json.model;
 
+
 
+		for ( var i = 0; i < model.vertices.length; i ++ ) {
 
+
 
+			parseVertices( model.vertices[ i ] );
 
+
 
+		}
 
+
 
+		for ( var i = 0; i < model.meshes.length; i ++ ) {
 
+
 
+			parseMeshes( model.meshes[ i ] );
 
+
 
+		}
 
+
 
+		for ( var i = 0; i < model.meshInstances.length; i ++ ) {
 
+
 
+			parseMeshInstances( model.meshInstances[ i ] );
 
+
 
+		}
 
+
 
+		for ( var i = 0; i < model.nodes.length; i ++ ) {
 
+
 
+			parseNodes( model.nodes[ i ] );
 
+
 
+		}
 
+
 
+		for ( var i = 0; i < model.parents.length; i ++ ) {
 
+
 
+			var parent = model.parents[ i ];
 
+
 
+			if ( parent === -1 ) continue;
 
+
 
+			model.nodes[ parent ]._object.add( model.nodes[ i ]._object );
 
+
 
+
 
+		}
 
+
 
+		return model.nodes[ 0 ]._object;
 
+
 
+	},
 
+
 
+	setCrossOrigin: function ( value ) {
 
+
 
+		this.crossOrigin = value;
 
+
 
+	}
 
+
 
+};

+ 247 - 0
examples/webgl_materials_basic_variations.html
查看文件 

@@ -0,0 +1,247 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - materials</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+					body {
 
+				color: #fff;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+
 
+				background-color: #fff;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Basic Material Variantions by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 
+		<script src="js/geometries/TextGeometry.js"></script>
 
+		<script src="js/utils/FontUtils.js"></script>
 
+		<script src="fonts/gentilis_regular.typeface.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			var container, stats;
 
+
 
+			var camera, scene, renderer, controls, objects = [];
 
+			var particleLight;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera.position.set( 0.0, 400, 400 * 3.5 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// Materials
 
+
 
+				var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				imgTexture.anisotropy = 16;
 
+				imgTexture = null;
 
+
 
+				var shininess = 50, specular = 0x333333, shading = THREE.SmoothShading;
 
+
 
+				var materials = [];
 
+
 
+				var path = "textures/cube/SwedishRoyalCastle/";
 
+				var format = '.jpg';
 
+				var urls = [
 
+						path + 'px' + format, path + 'nx' + format,
 
+						path + 'py' + format, path + 'ny' + format,
 
+						path + 'pz' + format, path + 'nz' + format
 
+					];
 
+
 
+				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
 
+				reflectionCube.format = THREE.RGBFormat;
 
+
 
+				var cubeWidth = 400;
 
+				var numberOfSphersPerSide = 5;
 
+				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
+				var stepSize = 1.0 / numberOfSphersPerSide;
 
+
 
+				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+
 
+				for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
+
 
+					var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
 
+
 
+					if( alpha >= 0.5 ) {
 
+						reflectionCube = null;
 
+					}
 
+
 
+					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
+
 
+						var reflectivity = beta;
 
+
 
+						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
+
 
+							var diffuseColor = baseColor.clone().multiplyScalar( gamma );
 
+
 
+							var material = new THREE.MeshBasicMaterial( { map: imgTexture, color: diffuseColor, reflectivity: reflectivity, shading: THREE.SmoothShading, envMap: reflectionCube } )
 
+
 
+							var mesh = new THREE.Mesh( geometry, material );
 
+
 
+							mesh.position.x = alpha * 400 - 200;
 
+							mesh.position.y = beta * 400 - 200;
 
+							mesh.position.z = gamma * 400 - 200;
 
+
 
+							objects.push( mesh );
 
+
 
+							scene.add( mesh );
 
+						}
 
+					}
 
+				}
 
+	
+				function addLabel( name, location ) {
 
+					var textGeo = new THREE.TextGeometry( name, {
 
+
 
+						size: 20,
 
+						height: 5,
 
+						curveSegments: 10,
 
+
 
+						font: 'gentilis',
 
+						weight: 'normal',
 
+						style: 'normal',
 
+
 
+						material: 0,
 
+						extrudeMaterial: 1
 
+
 
+					});
 
+
 
+					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					textMesh.position.copy( location );
 
+					scene.add( textMesh );
 
+				}
 
+
 
+				addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
 
+				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
 
+
 
+				addLabel( "-reflectivity", new THREE.Vector3( 0, -300, 0 ) );
 
+				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
+
 
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
 
+				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+
 
+				addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
 
+				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 
+
 
+				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 
+				scene.add( particleLight );
 
+
 
+				// Lights
 
+
 
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				directionalLight.position.set( 1, 1, 1 ).normalize();
 
+				scene.add( directionalLight );
 
+
 
+				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				particleLight.add( pointLight );
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setClearColor( 0x0a0a0a );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.sortObjects = true;
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				renderer.gammaInput = true;
 
+				renderer.gammaOutput = true;
 
+
 
+				//
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+
 
+				container.appendChild( stats.domElement );
 
+
 
+				controls = new THREE.OrbitControls( camera );
 
+				controls.target.set( 0, 0, 0 );
 
+				controls.update();
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = Date.now() * 0.00025;
 
+
 
+				//camera.position.x = Math.cos( timer ) * 800;
 
+				//camera.position.z = Math.sin( timer ) * 800;
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
+
 
+					var object = objects[ i ];
 
+
 
+					object.rotation.y += 0.005;
 
+
 
+				}
 
+
 
+				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 
+				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 
+				particleLight.position.z = Math.cos( timer * 3 ) * 300;
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 248 - 0
examples/webgl_materials_lambert_variations.html
查看文件 

@@ -0,0 +1,248 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - materials</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+					body {
 
+				color: #fff;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+
 
+				background-color: #fff;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Lambert Material Variantions by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 
+		<script src="js/geometries/TextGeometry.js"></script>
 
+		<script src="js/utils/FontUtils.js"></script>
 
+		<script src="fonts/gentilis_regular.typeface.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			var container, stats;
 
+
 
+			var camera, scene, renderer, controls, objects = [];
 
+			var particleLight;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera.position.set( 0.0, 400, 400 * 3.5 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// Materials
 
+
 
+				var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				imgTexture.anisotropy = 16;
 
+				imgTexture = null;
 
+
 
+				var shininess = 50, specular = 0x333333, shading = THREE.SmoothShading;
 
+
 
+				var materials = [];
 
+
 
+				var path = "textures/cube/SwedishRoyalCastle/";
 
+				var format = '.jpg';
 
+				var urls = [
 
+						path + 'px' + format, path + 'nx' + format,
 
+						path + 'py' + format, path + 'ny' + format,
 
+						path + 'pz' + format, path + 'nz' + format
 
+					];
 
+
 
+				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
 
+				reflectionCube.format = THREE.RGBFormat;
 
+
 
+				var cubeWidth = 400;
 
+				var numberOfSphersPerSide = 5;
 
+				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
+				var stepSize = 1.0 / numberOfSphersPerSide;
 
+
 
+				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+
 
+	
+				for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
+
 
+					var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
 
+
 
+					if( alpha >= 0.5 ) {
 
+						reflectionCube = null;
 
+					}
 
+
 
+					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
+
 
+						var reflectivity = beta;
 
+
 
+						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
+
 
+							var diffuseColor = baseColor.clone().multiplyScalar( gamma );
 
+
 
+							var material = new THREE.MeshLambertMaterial( { map: imgTexture, color: diffuseColor, reflectivity: reflectivity, shading: THREE.SmoothShading, envMap: reflectionCube } )
 
+
 
+							var mesh = new THREE.Mesh( geometry, material );
 
+
 
+							mesh.position.x = alpha * 400 - 200;
 
+							mesh.position.y = beta * 400 - 200;
 
+							mesh.position.z = gamma * 400 - 200;
 
+
 
+							objects.push( mesh );
 
+
 
+							scene.add( mesh );
 
+						}
 
+					}
 
+				}
 
+	
+				function addLabel( name, location ) {
 
+					var textGeo = new THREE.TextGeometry( name, {
 
+
 
+						size: 20,
 
+						height: 5,
 
+						curveSegments: 10,
 
+
 
+						font: 'gentilis',
 
+						weight: 'normal',
 
+						style: 'normal',
 
+
 
+						material: 0,
 
+						extrudeMaterial: 1
 
+
 
+					});
 
+
 
+					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					textMesh.position.copy( location );
 
+					scene.add( textMesh );
 
+				}
 
+
 
+				addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
 
+				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
 
+
 
+				addLabel( "-reflectivity", new THREE.Vector3( 0, -300, 0 ) );
 
+				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
+
 
+				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
 
+				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+	
+				addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
 
+				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 
+
 
+				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 
+				scene.add( particleLight );
 
+
 
+				// Lights
 
+
 
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				directionalLight.position.set( 1, 1, 1 ).normalize();
 
+				scene.add( directionalLight );
 
+
 
+				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				particleLight.add( pointLight );
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setClearColor( 0x0a0a0a );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.sortObjects = true;
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				renderer.gammaInput = true;
 
+				renderer.gammaOutput = true;
 
+
 
+				//
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+
 
+				container.appendChild( stats.domElement );
 
+
 
+				controls = new THREE.OrbitControls( camera );
 
+				controls.target.set( 0, 0, 0 );
 
+				controls.update();
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				render();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var timer = Date.now() * 0.00025;
 
+
 
+				//camera.position.x = Math.cos( timer ) * 800;
 
+				//camera.position.z = Math.sin( timer ) * 800;
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
+
 
+					var object = objects[ i ];
 
+
 
+					object.rotation.y += 0.005;
 
+
 
+				}
 
+
 
+				particleLight.position.x = Math.sin( timer * 7 ) * 300;
 
+				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 
+				particleLight.position.z = Math.cos( timer * 3 ) * 300;
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 15 - 6
examples/webgl_materials_phong_variations.html
查看文件 

@@ -81,8 +81,7 @@
 
 
 				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
 
 				reflectionCube.format = THREE.RGBFormat;
 
-				reflectionCube = null;
 
-
 
+		
 				var cubeWidth = 400;
 
 				var numberOfSphersPerSide = 5;
 
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
@@ -91,20 +90,30 @@
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
 	
-				for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
+				var localReflectionCube;
 
+				
+				for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
+
 
+					if( alphaIndex % 2 === 0 ) {
 
+						localReflectionCube = null;
 
+					}
 
+					else {
 
+						localReflectionCube = reflectionCube;
 
+					}
 
 
 					var specularShininess = Math.pow( 2, alpha * 10 );
 
 
 					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 
 						var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
 
+						var reflectivity = beta;
 
 
 						for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
 							// basic monochromatic energy preservation
 
 							var diffuseColor = new THREE.Color( 0, 0, gamma ).multiplyScalar( 1 - beta * 0.2 );
 
 
-							var material = new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, specular: specularColor, shininess: specularShininess, shading: THREE.SmoothShading, envMap: reflectionCube,  } )
 
+							var material = new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, specular: specularColor, reflectivity: reflectivity, shininess: specularShininess, shading: THREE.SmoothShading, envMap: localReflectionCube  } )
 
 
 							var mesh = new THREE.Mesh( geometry, material );
 
 
@@ -145,8 +154,8 @@
 
 				addLabel( "-shininess", new THREE.Vector3( -350, 0, 0 ) );
 
 				addLabel( "+shininess", new THREE.Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "-specular", new THREE.Vector3( 0, -300, 0 ) );
 
-				addLabel( "+specular", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, -300, 0 ) );
 
+				addLabel( "+specular, +reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
 
 				addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
 
 				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );

+ 11 - 3
examples/webgl_materials_physical_variations.html
查看文件 

@@ -88,11 +88,19 @@
 
 
 				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
-	
-				for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
+				var localReflectionCube;
 
+				
+				for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
 
 					var roughness = 1.0 - alpha;
 
 
+					if( alphaIndex % 2 === 0 ) {
 
+						localReflectionCube = null;
 
+					}
 
+					else {
 
+						localReflectionCube = reflectionCube;
 
+					}
 
+
 
 					for( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 
 						var metalness = beta;
 
@@ -102,7 +110,7 @@
 
 							// basic monochromatic energy preservation
 
 							var diffuseColor = new THREE.Color( gamma, 0, 0 ).multiplyScalar( 1 - 0.08 );
 
 
-							var material = new THREE.MeshPhysicalMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: reflectionCube } )
 
+							var material = new THREE.MeshPhysicalMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: localReflectionCube } )
 
 
 							var mesh = new THREE.Mesh( geometry, material );

+ 1 - 1
src/renderers/shaders/ShaderChunk/envmap_pars_fragment.glsl
查看文件 

@@ -1,6 +1,6 @@
 
 #ifdef USE_ENVMAP
 
-
 
 	uniform float reflectivity;
 
+
 
 	#ifdef ENVMAP_TYPE_CUBE
 
 		uniform samplerCube envMap;
 
 	#else

+ 3 - 3
utils/build/build.py
查看文件 

@@ -62,9 +62,9 @@ def main(argv=None):
 
 				if filename.endswith(".glsl"):
 
 					tmp.write(u'THREE.ShaderChunk[ \'' + os.path.splitext(os.path.basename(filename))[0] + u'\'] = "')
 
 					text = f.read()
 
-					text = re.sub(r"\t*//.*\n", "", text) # remove //
 
-					text = re.sub(r"\t*\/\*[\s\S]*\*\/\n", "", text) # remove /* */
 
-					text = re.sub(r"\n+", '\\\\n', text) # line breaks to \n
 
+					text = re.sub(r"[ \t]*//.*\n", "", text) # remove //
 
+					text = re.sub(r"[ \t]*/\*[\s\S]*?\*/", "", text) # remove /* */
 
+					text = re.sub(r"\n+", '\\\\n', text) # \n+ to \n
 
 					tmp.write(text)
 
 					tmp.write(u'";\n\n')
 
 				else:

Some files were not shown because too many files changed in this diff