Three
/
95


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - interactive - 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>

		<script src="../build/three.js"></script>
        <script src="js/controls/OrbitControls.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, controls, scene, renderer;


			var mesh;

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );

				//

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
				camera.position.set( -3, 0.4, -18 );
				camera.updateProjectionMatrix();
				scene = new THREE.Scene();

				//

				//scene.add( new THREE.AmbientLight( 0x444444 ) );

				// var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
				// light1.position.set( 1, 1, 1 );
				// scene.add( light1 );

				// var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
				// light2.position.set( 0, -1, 0 );
				// scene.add( light2 );

				//

                /*
				var triangles = 5000;

				var geometry = new THREE.BufferGeometry();

				var positions = new Float32Array( triangles * 3 * 3 );
				var normals = new Float32Array( triangles * 3 * 3 );
				var colors = new Float32Array( triangles * 3 * 3 );

				var color = new THREE.Color();

				var n = 800, n2 = n/2;	// triangles spread in the cube
				var d = 120, d2 = d/2;	// individual triangle size

				var pA = new THREE.Vector3();
				var pB = new THREE.Vector3();
				var pC = new THREE.Vector3();

				var cb = new THREE.Vector3();
				var ab = new THREE.Vector3();

				for ( var i = 0; i < positions.length; i += 9 ) {

					// positions

					var x = Math.random() * n - n2;
					var y = Math.random() * n - n2;
					var z = Math.random() * n - n2;

					var ax = x + Math.random() * d - d2;
					var ay = y + Math.random() * d - d2;
					var az = z + Math.random() * d - d2;

					var bx = x + Math.random() * d - d2;
					var by = y + Math.random() * d - d2;
					var bz = z + Math.random() * d - d2;

					var cx = x + Math.random() * d - d2;
					var cy = y + Math.random() * d - d2;
					var cz = z + Math.random() * d - d2;

					positions[ i ]     = ax;
					positions[ i + 1 ] = ay;
					positions[ i + 2 ] = az;

					positions[ i + 3 ] = bx;
					positions[ i + 4 ] = by;
					positions[ i + 5 ] = bz;

					positions[ i + 6 ] = cx;
					positions[ i + 7 ] = cy;
					positions[ i + 8 ] = cz;

					// flat face normals

					pA.set( ax, ay, az );
					pB.set( bx, by, bz );
					pC.set( cx, cy, cz );

					cb.subVectors( pC, pB );
					ab.subVectors( pA, pB );
					cb.cross( ab );

					cb.normalize();

					var nx = cb.x;
					var ny = cb.y;
					var nz = cb.z;

					normals[ i ]     = nx;
					normals[ i + 1 ] = ny;
					normals[ i + 2 ] = nz;

					normals[ i + 3 ] = nx;
					normals[ i + 4 ] = ny;
					normals[ i + 5 ] = nz;

					normals[ i + 6 ] = nx;
					normals[ i + 7 ] = ny;
					normals[ i + 8 ] = nz;

					// colors

					var vx = ( x / n ) + 0.5;
					var vy = ( y / n ) + 0.5;
					var vz = ( z / n ) + 0.5;

					color.setRGB( vx, vy, vz );

					colors[ i ]     = color.r;
					colors[ i + 1 ] = color.g;
					colors[ i + 2 ] = color.b;

					colors[ i + 3 ] = color.r;
					colors[ i + 4 ] = color.g;
					colors[ i + 5 ] = color.b;

					colors[ i + 6 ] = color.r;
					colors[ i + 7 ] = color.g;
					colors[ i + 8 ] = color.b;

				}
                */
               var shader = {
                    uniforms: {
                        "b":{type:'f',value:null},
                        "tex":{type:'t',value:null}
                    },
                    vertexShader: [
                        "precision highp float;",
                        "varying vec2 tc;",
                        "attribute vec4 p;",
                        "void main(){",
                        "   gl_Position=p;",
                        "   tc=vec2(0.5,0.5/8.0)*p.xy+vec2(0.5,6.5/8.0);",
                        "}"
                    ].join( "\n" ),
                    fragmentShader: [
                        "precision highp float;",
                        "varying vec2 tc;",
                        "uniform sampler2D tex;",
                        "uniform float b;",
                        "void main(){",
                        "   vec4 s=texture2D(tex,tc); ",
                        "   gl_FragColor.xyz=s.xyz*(b*s.w);",
                        "}"
                    ].join( "\n" )
               };

               var positions = new Float32Array([-1, -1, 0.5, 1, 3, -1, 0.5, 1, -1, 3, 0.5, 1]);

               var geometry = new THREE.BufferGeometry();
				geometry.addAttribute( 'p', new THREE.BufferAttribute( positions, 3 ) );

                geometry.computeBoundingSphere();
                
                new THREE.TextureLoader().load( 'textures/sky.png', function ( texture ) {
                    this.material = new THREE.RawShaderMaterial( {
                        uniforms: shader.uniforms,
                        vertexShader: shader.vertexShader,
                        fragmentShader: shader.fragmentShader
                    } );
     
                    this.material.uniforms.b.value = 7 * Math.sqrt(0.488874);
                    this.material.uniforms.tex.value = texture;
                    mesh = new THREE.Mesh( geometry, this.material );
					scene.add( mesh );

                }.bind(this));

                // this.material = new RawShaderMaterial( {
                //     uniforms: shader.uniforms,
                //     vertexShader: shader.vertexShader,
                //     fragmentShader: shader.fragmentShader
                // } );


                //this.material.uniforms.b.value = 7 * Math.sqrt(0.488874);//7 * Math.sqrt(this.backgroundBrightness))
				//
				var texture1 = new THREE.TextureLoader().load( 'textures/crate.gif' );
				var geometry1 = new THREE.BoxBufferGeometry( 200, 200, 200 );
				var material1 = new THREE.MeshBasicMaterial( { map: texture1 } );

				mesh1 = new THREE.Mesh( geometry1, material1 );
				scene.add( mesh1 );

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

                controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.addEventListener( 'change', render );

				stats = new Stats();
				container.appendChild( stats.dom );

				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 );
				renderer.render( scene, camera );
				controls.update();
			}

		</script>

	</body>
</html>