首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

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
alteredq 12 年之前
父节点
36ecec28c8
当前提交
1292a17d05
共有 2 个文件被更改，包括 79 次插入 和 7 次删除
合并视图 显示文件统计
  1. 78 5
      examples/css3d_molecules.html
  2. 1 2
      examples/js/loaders/PDBLoader.js

+ 78 - 5
examples/css3d_molecules.html
查看文件 

@@ -55,6 +55,13 @@
 
 				color: #000000;
 
 				color: #000000;
 
 				background-color: rgba(0,255,255,1);
 
 				background-color: rgba(0,255,255,1);
 
 			}
 
 			}
 
+
 
+			.bond {
 
+				width: 5px;
 
+				height: 10px;
 
+				background: #ffffff;
 
+				display: block;
 
+			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
@@ -73,6 +80,10 @@
 
 			var root;
 
 			var root;
 
 
 
 			var objects = [];
 
 			var objects = [];
 
+			var tmpVec1 = new THREE.Vector3();
 
+			var tmpVec2 = new THREE.Vector3();
 
+			var tmpVec3 = new THREE.Vector3();
 
+			var tmpVec4 = new THREE.Vector3();
 
 
 
 			var MOLECULES = {
 
 			var MOLECULES = {
 
 			"Ethanol"   :"ethanol.pdb",
 
 			"Ethanol"   :"ethanol.pdb",
 
@@ -226,16 +237,19 @@
 
 
 
 				for ( var i = 0; i < objects.length; i ++ ) {
 
 				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 = [];
 
 				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 ++ ) {
 
 					for ( var i = 0; i < geometry.vertices.length; i ++ ) {
 
 
 
@@ -263,7 +277,7 @@
 
 
 
 						var object = new THREE.CSS3DObject( atom );
 
 						var object = new THREE.CSS3DObject( atom );
 
 						object.position.copy( position );
 
 						object.position.copy( position );
 
-						object.position.multiplyScalar( 50 );
 
+						object.position.multiplyScalar( 75 );
 
 						object.billboard = true;
 
 						object.billboard = true;
 
 						root.add( object );
 
 						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();
 
 					render();
 
 
 
 				} );
 
 				} );

+ 1 - 2
examples/js/loaders/PDBLoader.js
查看文件 

@@ -214,7 +214,6 @@ THREE.PDBLoader.prototype.createModel = function ( json, callback ) {
 
 
 
 	}
 
 	}
 
 
 
-/*
 
 	for ( var i = 0; i < bonds.length; i ++ ) {
 
 	for ( var i = 0; i < bonds.length; i ++ ) {
 
 
 
 		var bond = bonds[ i ];
 
 		var bond = bonds[ i ];
 
@@ -229,7 +228,7 @@ THREE.PDBLoader.prototype.createModel = function ( json, callback ) {
 
 		geometryBonds.vertices.push( vertex2.clone() );
 
 		geometryBonds.vertices.push( vertex2.clone() );
 
 
 
 	}
 
 	}
 
-*/
 
+
 
 
 
 	callback( geometryAtoms, geometryBonds );
 
 	callback( geometryAtoms, geometryBonds );