javascript
/
three.js
réplica de https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - buffergeometry</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: #cccccc;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #050505;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #0080ff;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - lookuptable - vertex color values from a range of data values.</div>

		<script src="../build/three.min.js"></script>
		<script src="js/math/Lut.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;

			var mesh;
			
			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				// SCENE
				scene = new THREE.Scene();

				// CAMERA
				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 1800;  
				scene.add(camera);

				// STATS
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.bottom = '0px';
				stats.domElement.style.zIndex = 100;
				container.appendChild( stats.domElement );
				
				// LIGHT
				scene.add( new THREE.AmbientLight( 0x444444 ) );

				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );

				var color1, color2, color3, face1, face2, face3, numberOfSides, vertexIndex1, vertexIndex2, vertexIndex3;

				// faces are indexed using characters
				var faceIndices = [ 'a', 'b', 'c', 'd' ];
				
				//this is the array with the values we want to show.
				//we need a value for each vertex of the geometry.
				datavalues = [1000.3, 883.88, 881.75, 886.47, 858.05, 784.53, 853.9, 869.68, 850.47, 827.71, 865.73, 848.11, 815.16, 798.06, 834.61, 808.2, 1601.8, 1592.6, 1579.8, 1614.6, 1615.5, 1588.2, 1600.3, 1576.5, 1549.6, 1542.5, 1557.7, 776.35, 773.84, 868.51, 884.28, 863.27, 949.64, 957.58, 1453, 1401.9, 1413, 1348.5, 952.91, 891.63, 806.77, 986.47, 1009.5, 919.57, 836.09, 840.81, 829.02, 826.03, 818.11, 1604.5, 1603.6, 1608.2, 1606.4, 1604.1, 1603.1, 1601.3, 1601.9, 971.04, 756.56, 722.62, 717.14, 772.86, 738.95, 789.41, 805.54, 1599.9, 1601.4, 1603, 1599.3, 1602.2, 1598.2, 1602.6, 1601.1, 1600.9, 1602.2, 1603.5, 1603.2, 2435.8, 2468.3, 747.93, 759.85, 751.31, 745.46, 752.63, 747.7, 744.74, 767.07, 767.8, 751.74, 1750, 1782.5, 1661.3, 1869.4, 1606.1, 1765.5, 1923.5, 1726.9, 1829.2, 1573.8, 1513.3, 1493, 2191.5, 2298.7, 2243.7, 2177.9, 797.67, 797.44, 795.38, 798.97, 798.35, 794.95, 795.72, 796.72, 794.75, 794.69, 791.91, 791.99, 785.07, 783.31, 788.63, 791.58, 781.16, 788.66, 783.57, 780.11, 782.96, 787.58, 794.84, 794.17, 799.32, 796.81, 785.1, 782.32, 780.25, 777.37, 1844.3, 1833.5, 1883.2, 1804.5, 1815.7, 1758.6, 1813.5, 969.15, 741.61, 1793.4, 1823.9, 1816.3, 1798.3, 1780.6, 1728.1, 1727.9, 1835.2, 1843.5, 1841.9, 1861.8, 1907.9, 1436.8, 767.76, 802.37, 766.61, 740.87, 748.45, 801.62, 778.44, 798.51, 857.84, 844.66, 731.26, 763, 795.36, 1142.1, 789.08, 767.61, 1290.2, 1249.2, 903.61, 1590.9, 1593.9, 1591.4, 1593.4, 1590.3, 1592.9, 1589.7, 1593.3, 1595.9, 1594.7, 1594.3, 1594.2, 775.05, 779.75, 803.27, 797.14, 804.58, 777.96, 771.5, 915.69, 906.3, 913.67, 908.55, 919.44, 921.61, 909.6, 906.71, 899.47, 896.17, 910.9, 918.07, 1595.7, 1593.7, 1596.2, 1594.3, 1594.5, 1596, 1596, 1596.2, 1596.8, 759.79, 760.36, 761.58, 758.92, 752.49, 744.72, 754.53, 757.04, 757.96, 758.38, 760.98, 887.53, 891.32, 775.84, 788.91, 792.3, 799.14, 788.8, 788.77, 789.04, 1032.8, 970.02, 996.1, 1053, 1060.4, 1600.2, 1602.1, 1182.3, 1060.2, 993.57, 1270.9, 1416.7, 1277.2, 1091, 1150.2, 983.75, 919.33, 890.11, 979.49, 1666.5, 1656.6, 1635.1, 1618.9, 751.13, 736.89, 724.91, 736.25, 753.98, 787.12, 826.23, 769.11, 720.36, 708.37, 707.2, 755.58, 757.13, 759.74, 765.86, 673.91, 703.34, 727.47, 723.94, 665.68, 632.01, 631.38, 648.02, 725.78, 717.65, 671.89, 736.47, 735.67, 1629.4, 1648.7, 1580.7, 1578.3, 1621, 1690.2, 1637.2, 1604.5, 1718.6, 1700.7, 1538.7, 1536.3, 789.51, 793.52, 791.26, 726.07, 729.24, 728.45, 717.49, 716.65, 725.35, 726.02, 721.63, 728.59, 727.13, 730.59, 726.08, 729.23, 726.22, 728.27, 727.19, 730.07, 725.6, 730.12, 722.43, 729.05, 1676.9, 1631.4, 1621, 1663.1, 1725.2, 1747, 1742.4, 1589.8, 1684.8, 1593.4, 1631.2, 1606.3, 1404, 1389.3, 1535.3, 1552.4, 1552.9, 1524.2, 1524.6, 1503.6, 1516.4, 1561.8, 1574.2, 1548.1, 1555.3, 1580.2, 777.92, 783.28, 779.34, 783, 775.03, 783.5, 774.42, 777.44, 787.99, 788.15, 786.18, 789.43, 793.96, 793.77, 1538.4, 1535.2, 1535.3, 1562.5, 1530.4, 1517.1, 1679.1, 1621.2, 1532.2, 1559.1, 1498.5, 1494.8, 1392.2, 774.98, 865.4, 883.99, 871.45, 874.71, 859.11, 848.76, 849.32, 894.86, 902.12, 890.67, 850.73, 1821, 1528.1, 712.65, 734.12, 717.44, 714.99, 754.71, 746.85, 742.24, 760.04, 943.09, 928.17, 968.11, 949.85, 933.75, 967.38, 904.17, 947.28, 877.86, 924.4, 969.79, 977.7, 1579.9, 1546, 1541.8, 1483.4, 1511, 1503.3, 1455.2, 1439.1, 1471.1, 1498, 1520.8, 1555.1, 1566.2, 1461.8, 1517.4, 1491.2, 724.78, 750.21, 887.33, 881.62, 879.61, 1580.2, 1556.6, 800.13, 857.61, 1194.1, 1264, 1212.2, 1156.9, 1135.3, 1154.3, 1264.9, 1213.8, 1326.4, 1270.6, 1331.8, 1168.2, 1221.2, 781.63, 779.62, 777.96, 782.51, 785.51, 778.55, 782.5, 780.61, 777.64, 782.26, 775.19, 775.29, 958.64, 982.11, 941.42, 933.08, 971.55, 920.31, 992.01, 1014.4, 1003.5, 962.22, 904.26, 925.61, 1771.5, 1810.8, 1760.3, 1754.5, 1727.8, 1798.2, 1770.5, 1775.9, 1256.6, 1247.9, 709.99, 712.71, 750.55, 750.85, 739.65, 745.81, 753.71, 778.5, 1051.3, 1042.3, 1005.7, 1026.3, 1069.6, 1061.6, 993.02, 1028.4, 1066.2, 975.66, 980.64, 1594.2, 1589.5, 1519.1, 1649, 1631.2, 1638.1, 1611.9, 1641.8, 813.64, 795.91, 822.98, 680.73, 715.97, 770.63, 767.96, 1339.2, 1384.2, 1851.5, 1792.7, 1820.2, 1888.3, 1880.6, 1856, 1836.5, 1783.8, 1798.5, 1744.7, 1760.2, 1795.3, 1816.7, 1568.2, 1554.1, 1598.9, 1599.1, 1600, 1598.2, 1599.1, 1598.5, 1599.3, 1599.2, 1600.2, 1599.2, 1600, 1599.2, 1600.1, 1599.3, 1599.9, 1599.3, 1600, 943.59, 939.74, 934.1, 939.77, 953.25, 925.97, 928.25, 931.37, 927.31, 935.22, 927.74, 1597.9, 1599, 1595.4, 1599.1, 1599, 1600.9, 1597.3, 1593, 1605.1, 1596.9, 1596.3, 1592.1, 1595.6, 1515.2, 967.54, 986.66, 916.39, 664.06, 625.87, 1689.7, 1657.1, 1660, 1661.2, 1695.5, 1740.9, 1733, 1625, 1638, 1634.9, 1649.4, 1664.5, 832.04, 791.09, 1635.6, 1638.9, 1668.5, 1623.1, 1590.4, 1688.6, 1948.2, 1963.9, 1926.8, 1933.1, 1967.5, 1896.6, 1937.3, 1975.4, 1981.3, 1904.6, 1622.9, 1539.7, 1582.2, 1635.4, 1723.4, 1662.7, 1605, 1487.4, 1548.3, 1556.9, 1571.5, 1692.3, 1696, 1640.9, 1726.1, 1656.8, 1750.4, 1712.4, 1759.5, 1672.3, 1779.7, 1592.1, 1593.1, 694.27, 630.47, 684.02, 647.15, 717.59, 719.33, 706.71, 651.92, 622.49, 630.7, 688.91, 727.4, 1271.3, 1280.2, 1281.5, 1249.6, 1272.4, 1233, 1268.1, 1281.3, 1279.5, 881.76, 892, 854.68, 868.11, 839.9, 1076.7, 1092.7, 1073.7, 1063.8, 1091.3, 1039.9, 1029.6, 1144.1, 1158.1, 1103.7, 1073.4, 1050.5, 961.87, 943.2, 949.77, 979.04, 974.51, 955.69, 967.58, 931.91, 935.55, 938.93, 937.94, 952.66, 1590.8, 1598.6, 705.09, 587.72, 607.38, 790.02, 655.38, 751.29, 818.02, 592.3, 570.46, 596.94, 655.34, 616.74, 767.77, 803.3, 805.18, 803.64, 802.83, 800.86, 805.84, 805.24, 804.91, 1671.4, 1667.9, 1667.9, 1670.9, 1669.9, 1675, 1671.4, 1670.2, 1676.3, 1669.6, 1654.1, 1667.7, 1658.9, 1657.6, 842.97, 847.76, 824.96, 873.59, 864.48, 829.7, 811.24, 877.16, 841.26, 808.26, 794.28, 1564.2, 1575.3, 775.8, 771.99, 773.09, 781.49, 777.05, 779.3, 773.42, 775.06, 766.85, 773.09, 1819.7, 1131.4, 1114.1, 1165.7, 1153, 1250, 1438, 1515.4, 924.57, 944.05, 869.31, 949.43, 965.04, 896.82, 865.51, 979.14, 952.98, 890.35, 825.15, 820.29, 806.88, 921.21, 954.58, 978.05, 986.54, 1596.9, 1554.5, 810.33, 837.33, 976.29, 969.93, 983.16, 988.49, 965.59, 980.14, 964.31, 982.59, 978.81, 967, 996.23, 986.4, 795.94, 784.24, 773.68, 765.28, 777.12, 1052.2, 1658.7, 1659.3, 1649.5, 1643.4, 1656.6, 1634.7, 1628.8, 1622.3, 1692.1, 1655.6, 759.19, 763.34, 754.9, 745.32, 771.36, 755.15, 767.1, 756.52, 766.63, 772.11, 852.18, 2244.5, 2084.9, 1955.2, 2097.7, 2359.9, 2412.5, 2258.7, 2011.7, 1881.5, 1811.3, 1699.4, 1698.5, 748.49, 776.15, 907.9, 903.22, 755.05, 766.92, 778.27, 784.07, 771.01, 723.62, 1858.9, 1859.4, 1867.3, 1887.5, 1875.2, 1874.6, 1870.1, 1885.7, 1847.8, 1859, 1894.8, 1910.7, 890.02, 1730, 1872.1, 1775.4, 2001.8, 1563.8, 1538.6, 1529.2, 1581.5, 1555.9, 1586.2, 1505.9, 1500.3, 1512.5, 1491.2, 1765.2, 2160.4, 2016.6, 1850.7, 1637.2, 937.62, 999.11, 961.58, 997.75, 898.53, 911.58, 1052.9, 1128.7, 1159.7, 1146.2, 990.61, 1097.7, 1207.2, 1207.8, 807.14, 808.43, 805.17, 826.59, 814.93, 815.24, 831.05, 840.16, 811.5, 1893, 1879, 1596.8, 1594.7, 1593.8, 1595.4, 906.04, 861.63, 899.63, 931.72, 762.67, 887.33, 887.64, 963.98, 912.27, 1641.5, 1661.8, 1602.4, 965.67, 968.77, 1597.3, 1606.5, 1636.5, 1040, 1074, 1595.1, 1106.6, 1127.2, 1089.6, 1148.2, 1078.3, 1128.5, 1096.4, 1110, 1175, 1091, 1061.1, 1067.6, 1125.4, 1122, 1123.5, 1181.5, 1077.8, 1083.6, 1107.6, 1087.3, 825.11, 860.84, 878.2, 863.58, 825, 1683.5, 1658.7, 1847.2, 1789.2, 1766.6, 873.49, 882.06, 884.79, 825.07, 847.42, 861.03, 893.98, 898.36, 822.87, 854.46, 879.76, 901.99, 896.82, 659.44, 855.34, 855.48];

				var geometry_rainbow = new THREE.IcosahedronGeometry( 100, 2  );
				var geometry_cooltowarm  = new THREE.IcosahedronGeometry( 100, 2  );
				var geometry_blackbody  = new THREE.IcosahedronGeometry( 100, 2  );
				
				var lut_rainbow = new THREE.Lut('rainbow',512);
				var lut_cooltowarm = new THREE.Lut('cooltowarm',128);
				var lut_blackbody = new THREE.Lut('blackbody',32);
							 
				var max = Math.max.apply( Math, datavalues );
				var min = Math.min.apply( Math, datavalues );
				lut_rainbow.setMax(max);
				lut_rainbow.setMin(min);
				lut_cooltowarm.setMax(max);
				lut_cooltowarm.setMin(min);
				lut_blackbody.setMax(max);
				lut_blackbody.setMin(min);

				//lut_rainbow
				for ( var i = 0; i < geometry_rainbow.faces.length; i++ ) 
				{
				  face1  = geometry_rainbow.faces[ i ];	
				  numberOfSides = ( face1 instanceof THREE.Face3 ) ? 3 : 4;
				  for( var j = 0; j < numberOfSides; j++ ) 
				  {
					vertexIndex1 = face1[ faceIndices[ j ] ];
					color1 = new THREE.Color( 0xfdffff );
					color1 = lut_rainbow.getColor(datavalues[3 * i + j]);
					face1.vertexColors[ j ] = color1;
				  }
				}
				
				//lut_cooltowarm
				for ( var i = 0; i < geometry_cooltowarm.faces.length; i++ ) 
				{
				  face2  = geometry_cooltowarm.faces[ i ];	
				  numberOfSides = ( face2 instanceof THREE.Face3 ) ? 3 : 4;
				  for( var j = 0; j < numberOfSides; j++ ) 
				  {
					vertexIndex2 = face2[ faceIndices[ j ] ];
					color2 = new THREE.Color( 0xfdffff );
					color2 = lut_cooltowarm.getColor(datavalues[3 * i + j]);
					face2.vertexColors[ j ] = color2;
				  }
				}
				
				//lut_blackbody
				for ( var i = 0; i < geometry_blackbody.faces.length; i++ ) 
				{
				  face3  = geometry_blackbody.faces[ i ];	
				  numberOfSides = ( face3 instanceof THREE.Face3 ) ? 3 : 4;
				  for( var j = 0; j < numberOfSides; j++ ) 
				  {
					vertexIndex3 = face3[ faceIndices[ j ] ];
					color3 = new THREE.Color( 0xfdffff );
					color3 = lut_blackbody.getColor(datavalues[3 * i + j]);
					face3.vertexColors[ j ] = color3;
				  }
				}
				
				
				solid1 = new THREE.Mesh( geometry_rainbow, material );
				solid1.position.set(-250, 0, 0);
				scene.add(solid1);
				
				solid2 = new THREE.Mesh( geometry_cooltowarm, material );
				solid2.position.set(0, 0, 0);
				scene.add(solid2);
				
				solid3 = new THREE.Mesh( geometry_blackbody, material );
				solid3.position.set(250, 0, 0);
				scene.add(solid3);
				
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setClearColor(0xffffff, 1);
				renderer.setSize(  window.innerWidth,  window.innerHeight );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				container.appendChild( renderer.domElement );
		
				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 time = Date.now() * 0.001;

				solid1.rotation.x = time * 0.25;
				solid1.rotation.y = time * 0.5;
				solid2.rotation.x = time * 0.25;
				solid2.rotation.y = time * 0.5;
				solid3.rotation.x = time * 0.25;
				solid3.rotation.y = time * 0.5;

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>