Merge pull request #11413 from aardgoose/background-skybox

use scene.background in webgl_nearestneighbour example

examples/webgl_nearestneighbour.html

@@ -63,8 +63,8 @@
 
 			void main() {
 
-				gl_FragColor = texture2D(tex1, gl_PointCoord);
-				gl_FragColor.r = (1.0 - gl_FragColor.r) * vAlpha + gl_FragColor.r;
+				gl_FragColor = texture2D( tex1, gl_PointCoord );
+				gl_FragColor.r = ( 1.0 - gl_FragColor.r ) * vAlpha + gl_FragColor.r;
 
 			}
 
@@ -72,12 +72,9 @@
 		<script>
 
 			var camera, scene, renderer;
-			var geometry, mesh;
 			var controls;
 
-			var objects = [];
-
-			var amountOfParticles = 500000, maxDistance = Math.pow(120, 2);
+			var amountOfParticles = 500000, maxDistance = Math.pow( 120, 2 );
 			var positions, alphas, particles, _particleGeom;
 
 			var clock = new THREE.Clock();
@@ -88,7 +85,7 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000);
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000000 );
 
 				scene = new THREE.Scene();
 
@@ -96,22 +93,18 @@
 				controls.movementSpeed = 100;
 				controls.lookSpeed = 0.1;
 
-				var textureLoader = new THREE.TextureLoader();
-
-				var materials = [
+				// add a skybox background
+				var cubeTextureLoader = new THREE.CubeTextureLoader();
 
-					new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/px.jpg' ) } ), // right
-					new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/nx.jpg' ) } ), // left
-					new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/py.jpg' ) } ), // top
-					new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/ny.jpg' ) } ), // bottom
-					new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/pz.jpg' ) } ), // back
-					new THREE.MeshBasicMaterial( { map: textureLoader.load( 'textures/cube/skybox/nz.jpg' ) } )  // front
+				cubeTextureLoader.setPath( 'textures/cube/skybox/' );
 
-				];
+				var cubeTexture = cubeTextureLoader.load( [
+					'px.jpg', 'nx.jpg',
+					'py.jpg', 'ny.jpg',
+					'pz.jpg', 'nz.jpg',
+				] );
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000, 7, 7, 7 ), materials );
-				mesh.scale.x = - 1;
-				scene.add(mesh);
+				scene.background = cubeTexture;
 
 				//
 
@@ -121,7 +114,11 @@
 				document.body.appendChild( renderer.domElement );
 
 				// create the custom shader
-				var imagePreviewTexture = textureLoader.load( 'textures/crate.gif');
+
+				var textureLoader = new THREE.TextureLoader();
+
+				var imagePreviewTexture = textureLoader.load( 'textures/crate.gif' );
+
 				imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter;
 				imagePreviewTexture.magFilter = THREE.LinearFilter;
 
@@ -133,12 +130,14 @@
 					vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 					transparent: true
-				});
+				} );
 
 
 				//create particles with buffer geometry
-				var distanceFunction = function(a, b){
-					return Math.pow(a[0] - b[0], 2) +  Math.pow(a[1] - b[1], 2) +  Math.pow(a[2] - b[2], 2);
+				var distanceFunction = function ( a, b ) {
+
+					return Math.pow( a[ 0 ] - b [0 ], 2 ) +  Math.pow( a[ 1 ] - b[ 1 ], 2 ) +  Math.pow( a[ 2 ] - b[ 2 ], 2 );
+
 				};
 
 				positions = new Float32Array( amountOfParticles * 3 );
@@ -150,11 +149,14 @@
 
 				particles = new THREE.Points( _particleGeom, pointShaderMaterial );
 
-				for (var x = 0; x < amountOfParticles; x++) {
+				for ( var x = 0; x < amountOfParticles; x ++ ) {
+
 					positions[ x * 3 + 0 ] = Math.random() * 1000;
 					positions[ x * 3 + 1 ] = Math.random() * 1000;
 					positions[ x * 3 + 2 ] = Math.random() * 1000;
-					alphas[x] = 1.0;
+
+					alphas[ x ] = 1.0;
+
 				}
 
 
@@ -163,10 +165,10 @@
 				// creating the kdtree takes a lot of time to execute, in turn the nearest neighbour search will be much faster
 				kdtree = new THREE.TypedArrayUtils.Kdtree( positions, distanceFunction, 3 );
 
-				console.log('TIME building kdtree', new Date().getTime() - measureStart);
+				console.log( 'TIME building kdtree', new Date().getTime() - measureStart );
 
 				// display particles after the kd-tree was generated and the sorting of the positions-array is done
-				scene.add(particles);
+				scene.add( particles );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -187,7 +189,7 @@
 				requestAnimationFrame( animate );
 
 				//
-				displayNearest(camera.position);
+				displayNearest( camera.position );
 
 				controls.update( clock.getDelta() );
 
@@ -195,38 +197,45 @@
 
 			}
 
-			function displayNearest(position) {
+			function displayNearest( position ) {
 
 				// take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function
-				var imagePositionsInRange = kdtree.nearest([position.x, position.y, position.z], 100, maxDistance);
+				var imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance );
 
 				// We combine the nearest neighbour with a view frustum. Doesn't make sense if we change the sprites not in our view... well maybe it does. Whatever you want.
 				var _frustum = new THREE.Frustum();
 				var _projScreenMatrix = new THREE.Matrix4();
+
 				camera.matrixWorldInverse.getInverse( camera.matrixWorld );
 
 				_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				_frustum.setFromMatrix( _projScreenMatrix );
 
 				for ( var i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
-					var object = imagePositionsInRange[i];
+
+					var object = imagePositionsInRange[ i ];
 					var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
 
-					if (_frustum.containsPoint(objectPoint)){
+					if ( _frustum.containsPoint( objectPoint ) ) {
 
-						var objectIndex = object[0].pos;
+						var objectIndex = object[ 0 ].pos;
 
 						// set the alpha according to distance
-						alphas[ objectIndex ] = 1.0 / maxDistance * object[1];
+						alphas[ objectIndex ] = 1.0 / maxDistance * object[ 1 ];
+
 						// update the attribute
 						_particleGeom.attributes.alpha.needsUpdate = true;
+
 					}
+
 				}
+
 			}
 
 
 			init();
 			animate();
+
 		</script>
 	</body>
 </html>