PDBLoader: Switch to BufferGeometry

examples/css3d_molecules.html

@@ -349,10 +349,22 @@
 					var offset = geometry.center();
 					geometryBonds.translate( offset.x, offset.y, offset.z );
 
-					for ( var i = 0; i < geometry.vertices.length; i ++ ) {
+					var positions = geometry.getAttribute( 'position' );
+					var colors = geometry.getAttribute( 'color' );
+
+					var position = new THREE.Vector3();
+					var color = new THREE.Color();
+
+					for ( var i = 0; i < positions.count; i ++ ) {
+
+						position.x = positions.getX( i );
+						position.y = positions.getY( i );
+						position.z = positions.getZ( i );
+
+						color.r = colors.getX( i );
+						color.g = colors.getY( i );
+						color.b = colors.getZ( i );
 
-						var position = geometry.vertices[ i ];
-						var color = geometry.colors[ i ];
 						var element = geometry.elements[ i ];
 
 						if ( ! colorSpriteMap[ element ] ) {
@@ -386,10 +398,20 @@
 
 					}
 
-					for ( var i = 0; i < geometryBonds.vertices.length; i += 2 ) {
+					positions = geometryBonds.getAttribute( 'position' );
 
-						var start = geometryBonds.vertices[ i ];
-						var end = geometryBonds.vertices[ i + 1 ];
+					var start = new THREE.Vector3();
+					var end = new THREE.Vector3();
+
+					for ( var i = 0; i < positions.count; i += 2 ) {
+
+						start.x = positions.getX( i );
+						start.y = positions.getY( i );
+						start.z = positions.getZ( i );
+
+						end.x = positions.getX( i + 1 );
+						end.y = positions.getY( i + 1 );
+						end.z = positions.getZ( i + 1 );
 
 						start.multiplyScalar( 75 );
 						end.multiplyScalar( 75 );
@@ -397,7 +419,6 @@
 						tmpVec1.subVectors( end, start );
 						var bondLength = tmpVec1.length() - 50;
 
-
 						//
 
 						var bond = document.createElement( 'div' );

examples/js/loaders/PDBLoader.js

@@ -1,5 +1,6 @@
 /**
  * @author alteredq / http://alteredqualia.com/
+ * @author Mugen87 / https://github.com/Mugen87
  */
 
 THREE.PDBLoader = function ( manager ) {
@@ -56,7 +57,7 @@ THREE.PDBLoader.prototype = {
 
 				var h = hash( satom, eatom );
 
-				if ( bhash[ h ] == undefined ) {
+				if ( bhash[ h ] === undefined ) {
 
 					bonds.push( [ satom - 1, eatom - 1, 1 ] );
 					bhash[ h ] = bonds.length - 1;
@@ -88,7 +89,7 @@ THREE.PDBLoader.prototype = {
 
 		var x, y, z, e;
 
-		for ( var i = 0, il = lines.length; i < il; ++ i ) {
+		for ( var i = 0, l = lines.length; i < l; ++ i ) {
 
 			if ( lines[ i ].substr( 0, 4 ) == "ATOM" || lines[ i ].substr( 0, 6 ) == "HETATM" ) {
 
@@ -98,10 +99,10 @@ THREE.PDBLoader.prototype = {
 
 				e = trim( lines[ i ].substr( 76, 2 ) ).toLowerCase();
 
-				if ( e == "" ) e = trim( lines[ i ].substr( 12, 2 ) ).toLowerCase();
+				if ( e === "" ) e = trim( lines[ i ].substr( 12, 2 ) ).toLowerCase();
 				atoms.push( [ x, y, z, CPK[ e ], capitalize( e ) ] );
 
-				if ( histogram[ e ] == undefined ) histogram[ e ] = 1;
+				if ( histogram[ e ] === undefined ) histogram[ e ] = 1;
 				else histogram[ e ] += 1;
 
 			} else if ( lines[ i ].substr( 0, 6 ) == "CONECT" ) {
@@ -123,16 +124,21 @@ THREE.PDBLoader.prototype = {
 
 	createModel: function ( json, callback ) {
 
-		var scope = this,
-		geometryAtoms = new THREE.Geometry(),
-		geometryBonds = new THREE.Geometry();
+		var geometryAtoms = new THREE.BufferGeometry();
+		var geometryBonds = new THREE.BufferGeometry();
+
+		var i, l;
+
+		var verticesAtoms = [];
+		var colors = [];
+		var verticesBonds = [];
 
 		geometryAtoms.elements = [];
 
 		var atoms = json.atoms;
 		var bonds = json.bonds;
 
-		for ( var i = 0; i < atoms.length; i ++ ) {
+		for ( i = 0, l = atoms.length; i < l; i ++ ) {
 
 			var atom = atoms[ i ];
 
@@ -140,40 +146,42 @@ THREE.PDBLoader.prototype = {
 			var y = atom[ 1 ];
 			var z = atom[ 2 ];
 
-			var position = new THREE.Vector3( x, y, z );
-			geometryAtoms.vertices.push( position );
+			verticesAtoms.push( x, y, z );
 
 			var r = atom[ 3 ][ 0 ] / 255;
 			var g = atom[ 3 ][ 1 ] / 255;
 			var b = atom[ 3 ][ 2 ] / 255;
 
-			var color = new THREE.Color();
-			color.setRGB( r, g, b );
-
-			geometryAtoms.colors.push( color );
+			colors.push( r, g, b );
 
 			geometryAtoms.elements.push( atom[ 4 ] );
 
 		}
 
-		for ( var i = 0; i < bonds.length; i ++ ) {
+		for ( i = 0, l = bonds.length; i < l; i ++ ) {
 
 			var bond = bonds[ i ];
 
 			var start = bond[ 0 ];
 			var end = bond[ 1 ];
 
-			var vertex1 = geometryAtoms.vertices[ start ];
-			var vertex2 = geometryAtoms.vertices[ end ];
+			verticesBonds.push( verticesAtoms[ ( start * 3 ) + 0 ] );
+			verticesBonds.push( verticesAtoms[ ( start * 3 ) + 1 ] );
+			verticesBonds.push( verticesAtoms[ ( start * 3 ) + 2 ] );
 
-			geometryBonds.vertices.push( vertex1.clone() );
-			geometryBonds.vertices.push( vertex2.clone() );
+			verticesBonds.push( verticesAtoms[ ( end * 3 ) + 0 ] );
+			verticesBonds.push( verticesAtoms[ ( end * 3 ) + 1 ] );
+			verticesBonds.push( verticesAtoms[ ( end * 3 ) + 2 ] );
 
 		}
 
+		geometryAtoms.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( verticesAtoms ), 3 ) );
+		geometryAtoms.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( colors ), 3 ) );
+
+		geometryBonds.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( verticesBonds ), 3 ) );
+
 		callback( geometryAtoms, geometryBonds, json );
 
 	}
 
 };
-

examples/webgl_loader_pdb.html

@@ -199,16 +199,28 @@
 
 				loader.load( url, function ( geometry, geometryBonds, json ) {
 
-					var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
-					var sphereGeometry = new THREE.IcosahedronGeometry( 1, 2 );
+					var boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+					var sphereGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
 
 					var offset = geometry.center();
 					geometryBonds.translate( offset.x, offset.y, offset.z );
 
-					for ( var i = 0; i < geometry.vertices.length; i ++ ) {
+					var positions = geometry.getAttribute( 'position' );
+					var colors = geometry.getAttribute( 'color' );
+
+					var position = new THREE.Vector3();
+					var color = new THREE.Color();
+
+					for ( var i = 0; i < positions.count; i ++ ) {
+
+						position.x = positions.getX( i );
+						position.y = positions.getY( i );
+						position.z = positions.getZ( i );
+
+						color.r = colors.getX( i );
+						color.g = colors.getY( i );
+						color.b = colors.getZ( i );
 
-						var position = geometry.vertices[ i ];
-						var color = geometry.colors[ i ];
 						var element = geometry.elements[ i ];
 
 						var material = new THREE.MeshPhongMaterial( { color: color } );
@@ -232,10 +244,20 @@
 
 					}
 
-					for ( var i = 0; i < geometryBonds.vertices.length; i += 2 ) {
+					positions = geometryBonds.getAttribute( 'position' );
+
+					var start = new THREE.Vector3();
+					var end = new THREE.Vector3();
+
+					for ( var i = 0; i < positions.count; i += 2 ) {
+
+						start.x = positions.getX( i );
+						start.y = positions.getY( i );
+						start.z = positions.getZ( i );
 
-						var start = geometryBonds.vertices[ i ];
-						var end = geometryBonds.vertices[ i + 1 ];
+						end.x = positions.getX( i + 1 );
+						end.y = positions.getY( i + 1 );
+						end.z = positions.getZ( i + 1 );
 
 						start.multiplyScalar( 75 );
 						end.multiplyScalar( 75 );