Proposed example that illustrates a way to convert THREE.Geometry to THREE.BufferGeometry

9ecbc560 · Callum Prentice · 738eb538 · 9ecbc560 · 9ecbc560
隐藏空白更改
内联并排

Showing with 570 addition and 0 deletion

examples/index.html examples/index.html +1 -0

examples/webgl_buffergeometry_from_geometry.html examples/webgl_buffergeometry_from_geometry.html +569 -0

未找到文件。
--- a/examples/index.html
+++ b/examples/index.html
@@ -359,6 +359,7 @@
 				"webgl_buffergeometry",
 				"webgl_buffergeometry_custom_attributes_particles",
 				"webgl_buffergeometry_drawcalls",
+				"webgl_buffergeometry_from_geometry",
 				"webgl_buffergeometry_instancing",
 				"webgl_buffergeometry_instancing_dynamic",
 				"webgl_buffergeometry_instancing_billboards",

--- a/examples/webgl_buffergeometry_from_geometry.html
+++ b/examples/webgl_buffergeometry_from_geometry.html
+<!DOCTYPE html>
+<html>
+	<head>
+	<title>three.js - Geometry to BufferGeometry Example</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<meta content="initial-scale=1.0, maximum-scale=1.0" name="viewport">
+	<meta name="Generator" content="https://callum.com">
+	<style>
+		body {
+			background-color: #000;
+			font-family: Monospace;
+			margin: 0;
+			color: #000;
+			overflow: hidden;
+		}
+		#title {
+			position: absolute;
+			width: 100%;
+			top: 0;
+			padding: 0;
+			text-align: center;
+			font-size: 1.1em;
+			background-color: rgba(64,96,64,0.7);
+			color: #fff;
+		}
+		#title a {color:#ff0;}
+	</style>
+	<script type="text/javascript" src="../build/three.min.js"></script>
+	<script type="text/javascript" src="js/Detector.js"></script>
+	<script type="text/javascript" src="js/libs/stats.min.js"></script>
+	<script type="text/javascript" src="js/controls/TrackballControls.js"></script>
+	<script type="text/javascript" src="js/libs/dat.gui.min.js"></script>
+	</head>
+	<body onload="app()">
+		<div id="title"></div>
+		<script>
+		var camera, scene, renderer, controls, stats, gui;
+		var bufferMesh = 0;
+		var parameters = 0;
+
+		function app() {
+
+			if ( ! Detector.webgl ) {
+
+				Detector.addGetWebGLMessage();
+
+			}
+
+			init();
+			animate();
+
+		}
+
+		function init() {
+
+			renderer = new THREE.WebGLRenderer( {
+				antialias: true
+			} );
+			renderer.setClearColor( 0x000000, 0.0 );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
+
+			document.body.appendChild( renderer.domElement );
+
+			scene = new THREE.Scene();
+
+			camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 );
+			camera.position.z = 480.0;
+
+			scene.add( new THREE.AmbientLight( 0x444444 ) );
+
+			var light1 = new THREE.DirectionalLight( 0x999999, 0.1 );
+			light1.position.set( 1, 1, 1 );
+			scene.add( light1 );
+
+			var light2 = new THREE.DirectionalLight( 0x999999, 1.5 );
+			light2.position.set( 0, -1, 0 );
+			scene.add( light2 );
+
+			controls = new THREE.TrackballControls( camera, renderer.domElement );
+			controls.minDistance = 100.0;
+			controls.maxDistance = 800.0;
+			controls.dynamicDampingFactor = 0.1;
+
+			stats = new Stats();
+			stats.domElement.style.position = 'absolute';
+			stats.domElement.style.top = '24px';
+			document.body.appendChild( stats.domElement );
+
+			window.addEventListener( 'resize', onWindowResize, false );
+
+			createGui( 'Cylinder' );
+
+			createScene();
+
+		}
+
+		function createGeometry() {
+
+			if ( parameters.geomType === 'Cylinder' ) {
+
+				return new THREE.CylinderGeometry(
+					parameters.radius, parameters.radius, parameters.maxHeight, parameters.numSides, 1, !parameters.endCaps );
+
+			} else
+			if ( parameters.geomType === 'Cone' ) {
+
+				return new THREE.CylinderGeometry(
+					parameters.radius1, parameters.radius2, parameters.maxHeight, parameters.numSides, 1, !parameters.endCaps );
+
+			} else
+			if ( parameters.geomType === 'Sphere' ) {
+
+				return new THREE.SphereGeometry(
+					parameters.radius, parameters.segments, parameters.segments );
+
+			} else
+			if ( parameters.geomType === 'Tetrahedron' ) {
+
+				return new THREE.TetrahedronGeometry(
+					parameters.radius );
+
+			} else
+			if ( parameters.geomType === 'Heart' ) {
+
+				var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
+				var x = 0,
+					y = 0;
+				heartShape.moveTo( x + 25, y + 25 );
+				heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
+				heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
+				heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
+				heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
+				heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
+				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
+				var extrudeSettings = {
+					amount: 8,
+					bevelEnabled: true,
+					bevelSegments: 1,
+					steps: 2,
+					bevelSize: 1,
+					bevelThickness: 1
+				};
+				var geom = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
+				geom.applyMatrix( new THREE.Matrix4().makeRotationX( -THREE.Math.degToRad( 90 ) ) );
+				geom.applyMatrix( new THREE.Matrix4().makeScale( 0.1, 0.1, 0.1 ) );
+				geom.applyMatrix( new THREE.Matrix4().makeScale( parameters.radius, parameters.radius, parameters.radius ) );
+				return geom;
+
+			} else
+			if ( parameters.geomType === 'Torus' ) {
+
+				return new THREE.TorusGeometry(
+					parameters.radius1, parameters.radius2, parameters.segments, parameters.segments );
+
+			} else
+			if ( parameters.geomType === 'Torus Knot' ) {
+
+				return new THREE.TorusKnotGeometry(
+					parameters.radius1, parameters.radius2, parameters.segments, parameters.segments );
+
+			}
+
+		}
+
+		function createGui( geom_type ) {
+
+			if ( gui && gui.domElement ) {
+
+				document.body.removeChild( gui.domElement )
+
+			}
+
+			gui = new dat.GUI( {
+				autoPlace: false
+			} );
+
+			gui.domElement.style.position = 'absolute';
+			gui.domElement.style.top = '24px';
+			gui.domElement.style.right = '0';
+			document.body.appendChild( gui.domElement );
+
+			parameters = {
+				density: 50,
+				radius1: 10,
+				radius2: 5,
+				radius: 8,
+				numSides: 16,
+				maxHeight: 40,
+				endCaps: true,
+				segments: 16,
+				randomHeights: true
+			};
+
+			var object_list = [ 'Cylinder', 'Cone', 'Sphere', 'Tetrahedron', 'Heart', 'Torus', 'Torus Knot' ];
+
+			if ( geom_type === 'Cylinder' ) {
+
+				parameters.geomType = geom_type;
+
+				gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
+
+					createGui( value );
+					createScene();
+
+				} );
+				gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'numSides', 3, 64 ).step( 1 ).name( "Cylinder sides" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'maxHeight', 1, 80 ).name( "Max height" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'endCaps', true ).name( "End caps" ).onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'randomHeights', true ).name( "Random heights" ).onChange( function ( value ) {
+
+					createScene();
+
+				} );
+
+			} else
+			if ( geom_type === 'Cone' ) {
+
+				parameters.geomType = geom_type;
+				parameters.radius1 = 0;
+				parameters.radius2 = 9;
+				parameters.endCaps = false;
+
+				gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
+
+					createGui( value );
+					createScene();
+
+				} );
+				gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius1', 0, 20 ).name( "Top radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius2', 0, 20 ).name( "Bottom radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'numSides', 3, 64 ).step( 1 ).name( "Cone sides" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'maxHeight', 1, 80 ).name( "Max height" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'endCaps', true ).name( "End caps" ).onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'randomHeights', true ).name( "Random heights" ).onChange( function ( value ) {
+
+					createScene();
+
+				} );
+
+			} else
+			if ( geom_type === 'Sphere' ) {
+
+				parameters.geomType = geom_type;
+				parameters.density = 30;
+				parameters.radius = 12;
+				parameters.maxHeight = 50.0;
+				parameters.segments = 16;
+				parameters.randomHeights = false;
+
+				gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
+
+					createGui( value );
+					createScene();
+
+				} );
+				gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'segments', 0, 20 ).step( 1 ).name( "Segments" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'randomHeights', true ).name( "Randomize position" ).onChange( function ( value ) {
+
+					createScene();
+
+				} );
+
+			} else
+			if ( geom_type === 'Tetrahedron' ) {
+
+				parameters.geomType = geom_type;
+				parameters.density = 46;
+				parameters.radius = 15;
+				parameters.maxHeight = 50.0;
+				parameters.randomHeights = true;
+
+				gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
+
+					createGui( value );
+					createScene();
+
+				} );
+				gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'randomHeights', true ).name( "Randomize position" ).onChange( function ( value ) {
+
+					createScene();
+
+				} );
+
+			} else
+			if ( geom_type === 'Heart' ) {
+
+				parameters.geomType = geom_type;
+				parameters.density = 20;
+				parameters.radius = 3.5;
+				parameters.maxHeight = 50.0;
+				parameters.randomHeights = false;
+
+				gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
+
+					createGui( value );
+					createScene();
+
+				} );
+				gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen( ).onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+
+			} else
+			if ( geom_type === 'Torus' || geom_type === 'Torus Knot' ) {
+
+				parameters.geomType = geom_type;
+				parameters.density = 24;
+				parameters.radius1 = 16;
+				parameters.radius2 = 2;
+				parameters.maxHeight = 50.0;
+				parameters.segments = 32;
+				parameters.randomHeights = false;
+
+				gui.add( parameters, 'geomType', object_list ).name( 'Geometry type' ).onChange( function ( value ) {
+
+					createGui( value );
+					createScene();
+
+				} );
+				gui.add( parameters, 'density', 1, 180 ).step( 2 ).name( "Density" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius1', 0, 20 ).name( "Radius" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'radius2', 0, 20 ).name( "Tube" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'segments', 0, 64 ).step( 1 ).name( "Segments" ).listen().onFinishChange( function ( value ) {
+
+					createScene();
+
+				} );
+				gui.add( parameters, 'randomHeights', true ).name( "Randomize position" ).onChange( function ( value ) {
+
+					createScene();
+
+				} );
+
+			}
+
+		}
+
+		function createScene() {
+
+			if ( bufferMesh ) {
+
+				scene.remove( bufferMesh );
+
+			}
+
+			var buffer_geometry = new THREE.BufferGeometry();
+			var radius = 100.0;
+			var positions = 0;
+			var normals = 0;
+			var colors = 0;
+
+			for ( var num_lat = 0; num_lat < parameters.density / 2; ++ num_lat ) {
+
+				var lat_lhs = ( num_lat + 0 ) * 180 / ( parameters.density / 2 );
+				var lat_rhs = ( num_lat + 1 ) * 180 / ( parameters.density / 2 );
+				var lat = ( lat_lhs + lat_rhs ) / 2.0;
+
+				for ( var num_lng = 0; num_lng < parameters.density; ++ num_lng ) {
+
+					var lng_lhs = ( num_lng + 0 ) * 360 / parameters.density;
+					var lng_rhs = ( num_lng + 1 ) * 360 / parameters.density;
+					var lng = ( lng_lhs + lng_rhs ) / 2.0;
+
+					var height = parameters.maxHeight;
+					if ( parameters.randomHeights ) {
+
+						height = Math.random() * ( parameters.maxHeight - 5.0 ) + 5;
+
+					}
+
+					var phi = lat * Math.PI / 180.0;
+					var theta = lng * Math.PI / 180.0;
+					var x = radius * Math.sin( phi ) * Math.cos( theta );
+					var y = radius * Math.cos( phi );
+					var z = radius * Math.sin( phi ) * Math.sin( theta );
+
+					var geometry = createGeometry();
+
+					geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, height / 2, 0 ) );
+					geometry.applyMatrix( new THREE.Matrix4().makeRotationX( -THREE.Math.degToRad( 90 ) ) );
+					geometry.applyMatrix( new THREE.Matrix4().lookAt( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( x, y, z ), new THREE.Vector3( 0, 1, 0 ) ) );
+					geometry.applyMatrix( new THREE.Matrix4().makeTranslation( x, y, z ) );
+
+					var color = new THREE.Color( 0xffffff );
+					color.setHSL( lat / 180.0, 1.0, 0.7 );
+
+					if ( positions === 0 ) {
+
+						var num_stacks = parameters.density * parameters.density / 2;
+
+						var str = 'Geometry to BufferGeometry Example - ' + parseInt( num_stacks * geometry.faces.length, 10 ) + ' triangles (<a target="_blank" href="http://callum.com">author</a>)';
+						document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
+
+						positions = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
+						normals = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
+						colors = new Float32Array( num_stacks * geometry.faces.length * 3 * 3 );
+
+					}
+
+					geometry.faces.forEach( function ( face, index ) {
+
+						var cur_element = ( ( num_lng + num_lat * parameters.density ) * geometry.faces.length + index );
+
+						positions[ cur_element * 9 + 0 ] = geometry.vertices[ face.a ].x;
+						positions[ cur_element * 9 + 1 ] = geometry.vertices[ face.a ].y;
+						positions[ cur_element * 9 + 2 ] = geometry.vertices[ face.a ].z;
+						positions[ cur_element * 9 + 3 ] = geometry.vertices[ face.b ].x;
+						positions[ cur_element * 9 + 4 ] = geometry.vertices[ face.b ].y;
+						positions[ cur_element * 9 + 5 ] = geometry.vertices[ face.b ].z;
+						positions[ cur_element * 9 + 6 ] = geometry.vertices[ face.c ].x;
+						positions[ cur_element * 9 + 7 ] = geometry.vertices[ face.c ].y;
+						positions[ cur_element * 9 + 8 ] = geometry.vertices[ face.c ].z;
+
+						normals[ cur_element * 9 + 0 ] = face.normal.x;
+						normals[ cur_element * 9 + 1 ] = face.normal.y;
+						normals[ cur_element * 9 + 2 ] = face.normal.z;
+						normals[ cur_element * 9 + 3 ] = face.normal.x;
+						normals[ cur_element * 9 + 4 ] = face.normal.y;
+						normals[ cur_element * 9 + 5 ] = face.normal.z;
+						normals[ cur_element * 9 + 6 ] = face.normal.x;
+						normals[ cur_element * 9 + 7 ] = face.normal.y;
+						normals[ cur_element * 9 + 8 ] = face.normal.z;
+
+						colors[ cur_element * 9 + 0 ] = color.r;
+						colors[ cur_element * 9 + 1 ] = color.g;
+						colors[ cur_element * 9 + 2 ] = color.b;
+						colors[ cur_element * 9 + 3 ] = color.r;
+						colors[ cur_element * 9 + 4 ] = color.g;
+						colors[ cur_element * 9 + 5 ] = color.b;
+						colors[ cur_element * 9 + 6 ] = color.r;
+						colors[ cur_element * 9 + 7 ] = color.g;
+						colors[ cur_element * 9 + 8 ] = color.b;
+
+					} );
+
+				}
+
+			}
+
+			buffer_geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			buffer_geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
+			buffer_geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+
+			buffer_geometry.computeBoundingSphere();
+
+			var buffer_material = new THREE.MeshPhongMaterial( {
+				color: 0x999999,
+				specular: 0x333333,
+				shininess: 50,
+				side: THREE.DoubleSide,
+				vertexColors: THREE.VertexColors,
+				shading: THREE.SmoothShading
+			} );
+
+			bufferMesh = new THREE.Mesh( buffer_geometry, buffer_material );
+			scene.add( bufferMesh );
+
+		}
+
+		function onWindowResize() {
+
+			camera.aspect = window.innerWidth / window.innerHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize( window.innerWidth, window.innerHeight );
+
+		}
+
+		function animate( time ) {
+
+			requestAnimationFrame( animate );
+			controls.update();
+			stats.update();
+			renderer.render( scene, camera );
+
+		}
+		</script>
+	</body>
+</html>
\ No newline at end of file