Added bonds to CSS3D molecules example.

Maybe these should be toggleable, they are too slow for larger molecules. It seems no matter which DOM elements are used for CSS 3D, you can't have more than couple hundreds without starting to hit a performance wall, even on desktop browsers ;S

Added bonds to CSS3D molecules example.
Maybe these should be toggleable, they are too slow for larger molecules. It seems no matter which DOM elements are used for CSS 3D, you can't have more than couple hundreds without starting to hit a performance wall, even on desktop browsers ;S
1292a17d · alteredq · 36ecec28 · 1292a17d · 1292a17d
隐藏空白更改
内联并排

Showing with 79 addition and 7 deletion

examples/css3d_molecules.html examples/css3d_molecules.html +78 -5

examples/js/loaders/PDBLoader.js examples/js/loaders/PDBLoader.js +1 -2

未找到文件。
--- a/examples/css3d_molecules.html
+++ b/examples/css3d_molecules.html
@@ -55,6 +55,13 @@
 				color: #000000;
 				background-color: rgba(0,255,255,1);
 			}
+
+			.bond {
+				width: 5px;
+				height: 10px;
+				background: #ffffff;
+				display: block;
+			}
 		</style>
 	</head>
 	<body>
@@ -73,6 +80,10 @@
 			var root;

 			var objects = [];
+			var tmpVec1 = new THREE.Vector3();
+			var tmpVec2 = new THREE.Vector3();
+			var tmpVec3 = new THREE.Vector3();
+			var tmpVec4 = new THREE.Vector3();

 			var MOLECULES = {
 			"Ethanol"   :"ethanol.pdb",
@@ -226,16 +237,19 @@

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

-					root.remove( objects[ i ] );
-					renderer.cameraElement.removeChild( objects[ i ].element );
+					var object = objects[ i ];
+
+					object.parent.remove( object );
+					renderer.cameraElement.removeChild( object.element );

 				}

 				objects = [];

-				loader.load( url, function ( geometry ) {
+				loader.load( url, function ( geometry, geometryBonds ) {

-					THREE.GeometryUtils.center( geometry );
+					var offset = THREE.GeometryUtils.center( geometry );
+					geometryBonds.applyMatrix( new THREE.Matrix4().makeTranslation( offset.x, offset.y, offset.z ) );

 					for ( var i = 0; i < geometry.vertices.length; i ++ ) {

@@ -263,7 +277,7 @@

 						var object = new THREE.CSS3DObject( atom );
 						object.position.copy( position );
-						object.position.multiplyScalar( 50 );
+						object.position.multiplyScalar( 75 );
 						object.billboard = true;
 						root.add( object );

@@ -271,6 +285,65 @@

 					}

+					for ( var i = 0; i < geometryBonds.vertices.length; i += 2 ) {
+
+						var start = geometryBonds.vertices[ i ];
+						var end = geometryBonds.vertices[ i + 1 ];
+
+						start.multiplyScalar( 75 );
+						end.multiplyScalar( 75 );
+
+						tmpVec1.sub( end, start );
+						var bondLength = tmpVec1.length() - 50;
+
+						//
+
+						var bond = document.createElement( 'div' );
+						bond.className = "bond";
+						bond.style.height = bondLength + "px";
+
+						var object = new THREE.CSS3DObject( bond );
+						object.position.copy( start );
+						object.position.lerpSelf( end, 0.5 );
+
+						//
+
+						var axis = tmpVec2.set( 0, 1, 0 ).crossSelf( tmpVec1 );
+						var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
+
+						var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
+						object.matrix = objMatrix;
+						object.rotation.setEulerFromRotationMatrix( object.matrix, object.eulerOrder );
+
+						root.add( object );
+
+						objects.push( object );
+
+						//
+
+						var bond = document.createElement( 'div' );
+						bond.className = "bond";
+						bond.style.height = bondLength + "px";
+
+						var joint = new THREE.Object3D( bond );
+						joint.position.copy( start );
+						joint.position.lerpSelf( end, 0.5 );
+
+						joint.matrix.copy( objMatrix );
+						joint.rotation.setEulerFromRotationMatrix( joint.matrix, joint.eulerOrder );
+
+						var object = new THREE.CSS3DObject( bond );
+						object.rotation.y = Math.PI/2;
+
+						joint.add( object );
+						root.add( joint );
+
+						objects.push( object );
+
+					}
+
+					//console.log( "CSS3DObjects:", objects.length );
+
 					render();

 				} );

--- a/examples/js/loaders/PDBLoader.js
+++ b/examples/js/loaders/PDBLoader.js
@@ -214,7 +214,6 @@ THREE.PDBLoader.prototype.createModel = function ( json, callback ) {

 	}

-/*
 	for ( var i = 0; i < bonds.length; i ++ ) {

 		var bond = bonds[ i ];
@@ -229,7 +228,7 @@ THREE.PDBLoader.prototype.createModel = function ( json, callback ) {
 		geometryBonds.vertices.push( vertex2.clone() );

 	}
-*/
+

 	callback( geometryAtoms, geometryBonds );