Inicio Explorar Axuda
Iniciar sesión
javascript
/
three.js
réplica de https://github.com/tazdij/three.js.git
2
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

Merge pull request #13818 from Mugen87/dev4

Examples: Combine points examples.
Mr.doob %!s(int64=7) %!d(string=hai) anos
pai
39fcbc7d3e e998941784
achega
dd1d166fa9
Modificáronse 5 ficheiros con 43 adicións e 415 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 0 2
      examples/files.js
  2. 15 2
      examples/webgl_points_billboards.html
  3. 0 193
      examples/webgl_points_billboards_colors.html
  4. 0 216
      examples/webgl_points_random.html
  5. 28 2
      examples/webgl_points_sprites.html

+ 0 - 2
examples/files.js
Ver ficheiro 

@@ -216,9 +216,7 @@ var files = {
 
 		"webgl_physics_terrain",
 
 		"webgl_physics_terrain",
 
 		"webgl_physics_volume",
 
 		"webgl_physics_volume",
 
 		"webgl_points_billboards",
 
 		"webgl_points_billboards",
 
-		"webgl_points_billboards_colors",
 
 		"webgl_points_dynamic",
 
 		"webgl_points_dynamic",
 
-		"webgl_points_random",
 
 		"webgl_points_sprites",
 
 		"webgl_points_sprites",
 
 		"webgl_postprocessing",
 
 		"webgl_postprocessing",
 
 		"webgl_postprocessing_advanced",
 
 		"webgl_postprocessing_advanced",

+ 15 - 2
examples/webgl_points_billboards.html
Ver ficheiro 

@@ -23,9 +23,9 @@
 
 			#info {
 
 			#info {
 
 				color:#fff;
 
 				color:#fff;
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 0px; width: 100%;
 
+				top: 0px;
 
+				width: 100%;
 
 				padding: 5px;
 
 				padding: 5px;
 
-				z-index:100;
 
 			}
 
 			}
 
 
 
 		</style>
 
 		</style>
 
@@ -40,6 +40,7 @@
 
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/libs/dat.gui.min.js"></script>
 
 
 
 		<script>
 
 		<script>
 
 
 
@@ -99,6 +100,18 @@
 
 
 
 				//
 
 				//
 
 
 
+				var gui = new dat.GUI();
 
+
 
+				gui.add( material, 'sizeAttenuation' ).onChange( function() {
 
+
 
+					material.needsUpdate = true;
 
+
 
+				} );
 
+
 
+				gui.open();
 
+
 
+				//
 
+
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );

+ 0 - 193
examples/webgl_points_billboards_colors.html
Ver ficheiro 

@@ -1,193 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - particles - billboards - colors</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 {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-
 
-			#info {
 
-				color:#fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl particle billboards colors example
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-
 
-			var camera, scene, renderer, stats, material;
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
 
-				camera.position.z = 1400;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
 
-
 
-				var geometry = new THREE.BufferGeometry();
 
-				var vertices = [];
 
-				var colors = [];
 
-
 
-				var sprite = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
 
-
 
-				var color = new THREE.Color();
 
-
 
-				for ( var i = 0; i < 5000; i ++ ) {
 
-
 
-					var x = 2000 * Math.random() - 1000;
 
-					var y = 2000 * Math.random() - 1000;
 
-					var z = 2000 * Math.random() - 1000;
 
-
 
-					color.setHSL( ( x + 1000 ) / 2000, 1, 0.5 );
 
-
 
-					vertices.push( x, y, z );
 
-					colors.push( color.r, color.g, color.b );
 
-
 
-				}
 
-
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-
 
-
 
-				material = new THREE.PointsMaterial( { size: 85, map: sprite, vertexColors: THREE.VertexColors, alphaTest: 0.5, transparent: true } );
 
-				material.color.setHSL( 1.0, 0.2, 0.7 );
 
-
 
-				var particles = new THREE.Points( geometry, material );
 
-				scene.add( particles );
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onWindowResize( event ) {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				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.00005;
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 
-				material.color.setHSL( h, 1.0, 0.6 );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 216
examples/webgl_points_random.html
Ver ficheiro 

@@ -1,216 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - particles</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 {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index: 100;
 
-			}
 
-
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl particles example
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-
 
-			var camera, scene, renderer, stats, materials = [], parameters;
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
 
-
 
-				var geometry = new THREE.BufferGeometry();
 
-
 
-				var vertices = [];
 
-
 
-				for ( var i = 0; i < 20000; i ++ ) {
 
-
 
-					var x = Math.random() * 2000 - 1000;
 
-					var y = Math.random() * 2000 - 1000;
 
-					var z = Math.random() * 2000 - 1000;
 
-
 
-					vertices.push( x, y, z );
 
-
 
-				}
 
-
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-
 
-				parameters = [
 
-					[ [ 1, 1, 0.5 ], 5 ],
 
-					[ [ 0.95, 1, 0.5 ], 4 ],
 
-					[ [ 0.90, 1, 0.5 ], 3 ],
 
-					[ [ 0.85, 1, 0.5 ], 2 ],
 
-					[ [ 0.80, 1, 0.5 ], 1 ]
 
-				];
 
-
 
-				for ( var i = 0; i < parameters.length; i ++ ) {
 
-
 
-					var size  = parameters[ i ][ 1 ];
 
-
 
-					materials[ i ] = new THREE.PointsMaterial( { size: size } );
 
-
 
-					var particles = new THREE.Points( geometry, materials[ i ] );
 
-
 
-					particles.rotation.x = Math.random() * 6;
 
-					particles.rotation.y = Math.random() * 6;
 
-					particles.rotation.z = Math.random() * 6;
 
-
 
-					scene.add( particles );
 
-
 
-				}
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				var time = Date.now() * 0.00005;
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
 
-
 
-					var object = scene.children[ i ];
 
-
 
-					if ( object instanceof THREE.Points ) {
 
-
 
-						object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) );
 
-
 
-					}
 
-
 
-				}
 
-
 
-				for ( var i = 0; i < materials.length; i ++ ) {
 
-
 
-					var color = parameters[ i ][ 0 ];
 
-
 
-					var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
 
-					materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 28 - 2
examples/webgl_points_sprites.html
Ver ficheiro 

@@ -23,9 +23,9 @@
 
 			#info {
 
 			#info {
 
 				color:#fff;
 
 				color:#fff;
 
 				position: absolute;
 
 				position: absolute;
 
-				top: 0px; width: 100%;
 
+				top: 0px;
 
+				width: 100%;
 
 				padding: 5px;
 
 				padding: 5px;
 
-				z-index:100;
 
 			}
 
 			}
 
 
 
 		</style>
 
 		</style>
 
@@ -41,6 +41,7 @@
 
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/libs/dat.gui.min.js"></script>
 
 
 
 		<script>
 
 		<script>
 
 
 
@@ -113,14 +114,39 @@
 
 
 
 				}
 
 				}
 
 
 
+				//
 
+
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer = new THREE.WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 				document.body.appendChild( renderer.domElement );
 
 
 
+				//
 
+
 
 				stats = new Stats();
 
 				stats = new Stats();
 
 				document.body.appendChild( stats.dom );
 
 				document.body.appendChild( stats.dom );
 
 
 
+				//
 
+
 
+				var gui = new dat.GUI();
 
+
 
+				var params = {
 
+					texture: true
 
+				}
 
+
 
+				gui.add( params, 'texture' ).onChange( function( value ) {
 
+
 
+					for ( var i = 0; i < materials.length; i ++ ) {
 
+
 
+						materials[ i ].map = ( value === true ) ? parameters[ i ][ 1 ] : null;
 
+						materials[ i ].needsUpdate = true;
 
+
 
+					}
 
+
 
+				} );
 
+
 
+				gui.open();
 
+
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );