Halaman utama Jelajahi Bantuan
Masuk
javascript
/
three.js
cermin dari https://github.com/tazdij/three.js.git
2
0
Fork 0
Berkas Masalah 0 Wiki
Jelajahi Sumber

Added labels to PDBLoader example. Fixes #4846.

Mr.doob 11 tahun lalu
induk
6b86f7b62c
melakukan
a1f50ed7fd
4 mengubah file dengan 43 tambahan dan 33 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 8 3
      examples/js/loaders/PDBLoader.js
  2. 1 7
      examples/js/renderers/CSS2DRenderer.js
  3. 0 6
      examples/js/renderers/CSS3DRenderer.js
  4. 34 17
      examples/webgl_loader_pdb.html

+ 8 - 3
examples/js/loaders/PDBLoader.js
Tampilan Berkas 

@@ -2,7 +2,11 @@
 
  * @author alteredq / http://alteredqualia.com/
 
  */
 
 
-THREE.PDBLoader = function () {};
 
+THREE.PDBLoader = function ( manager ) {
 
+
 
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
 
+
 
+};
 
 
 THREE.PDBLoader.prototype = {
 
 
@@ -63,7 +67,7 @@ THREE.PDBLoader.prototype = {
 
 					// doesn't really work as almost all PDBs
 
 					// have just normal bonds appearing multiple
 
 					// times instead of being double/triple bonds
 
-					//bonds[bhash[h]][2] += 1;
 
+					// bonds[bhash[h]][2] += 1;
 
 
 				}
 
 
@@ -143,6 +147,7 @@ THREE.PDBLoader.prototype = {
 
 			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 );
 
 
@@ -167,7 +172,7 @@ THREE.PDBLoader.prototype = {
 
 
 		}
 
 
-		callback( geometryAtoms, geometryBonds );
 
+		callback( geometryAtoms, geometryBonds, json );
 
 
 	}

+ 1 - 7
examples/js/renderers/CSS2DRenderer.js
Tampilan Berkas 

@@ -15,12 +15,6 @@ THREE.CSS2DObject = function ( element ) {
 
 
 			this.element.parentNode.removeChild( this.element );
 
 
-			for ( var i = 0, l = this.children.length; i < l; i ++ ) {
 
-
 
-				this.children[ i ].dispatchEvent( event );
 
-
 
-			}
 
-
 
 		}
 
 
 	} );
 
@@ -33,7 +27,7 @@ THREE.CSS2DObject.prototype = Object.create( THREE.Object3D.prototype );
 
 
 THREE.CSS2DRenderer = function () {
 
 
-	console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
 
+	console.log( 'THREE.CSS2DRenderer', THREE.REVISION );
 
 
 	var _width, _height;
 
 	var _widthHalf, _heightHalf;

+ 0 - 6
examples/js/renderers/CSS3DRenderer.js
Tampilan Berkas 

@@ -16,12 +16,6 @@ THREE.CSS3DObject = function ( element ) {
 
 
 			this.element.parentNode.removeChild( this.element );
 
 
-			for ( var i = 0, l = this.children.length; i < l; i ++ ) {
 
-
 
-				this.children[ i ].dispatchEvent( event );
 
-
 
-			}
 
-
 
 		}
 
 
 	} );

+ 34 - 17
examples/webgl_loader_pdb.html
Tampilan Berkas 

@@ -53,26 +53,29 @@
 
 				background-color: rgba(0,255,255,1);
 
 			}
 
 
-			.bond {
 
-				width: 5px;
 
-				height: 10px;
 
-				background: #eee;
 
-				display: block;
 
+			.label {
 
+				text-shadow: -1px 1px 1px rgb(0,0,0);
 
+				margin-left: 25px;
 
 			}
 
+
 
+
 
 		</style>
 
 	</head>
 
 	<body>
 
 		<script src="../build/three.min.js"></script>
 
+
 
 		<script src="js/controls/TrackballControls.js"></script>
 
 		<script src="js/loaders/PDBLoader.js"></script>
 
+		<script src="js/renderers/CSS2DRenderer.js"></script>
 
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank">three.js webgl</a> - molecules</div>
 
 		<div id="menu"></div>
 
 
 		<script>
 
-			var camera, scene, renderer;
 
+			var camera, scene, renderer, labelsRenderer;
 
 			var controls;
 
+
 
 			var root;
 
 
 			var MOLECULES = {
 
@@ -97,8 +100,6 @@
 
 			};
 
 
 			var loader = new THREE.PDBLoader();
 
-			var colorSpriteMap = {};
 
-			var baseSprite = document.createElement( 'img' );
 
 
 			var menu = document.getElementById( "menu" );
 
 
@@ -126,6 +127,13 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
 
+				labelRenderer = new THREE.CSS2DRenderer();
 
+				labelRenderer.setSize( window.innerWidth, window.innerHeight );
 
+				labelRenderer.domElement.style.position = 'absolute';
 
+				labelRenderer.domElement.style.top = '0';
 
+				labelRenderer.domElement.style.pointerEvents = 'none';
 
+				document.getElementById( 'container' ).appendChild( labelRenderer.domElement );
 
+
 
 				//
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 
@@ -134,14 +142,8 @@
 
 
 				//
 
 
-				baseSprite.onload = function () {
 
-
 
-					loadMolecule( "models/molecules/caffeine.pdb" );
 
-					createMenu();
 
-
 
-				};
 
-
 
-				baseSprite.src = 'textures/sprites/ball.png';
 
+				loadMolecule( "models/molecules/caffeine.pdb" );
 
+				createMenu();
 
 
 				//
 
 
@@ -188,7 +190,9 @@
 
 
 				}
 
 
-				loader.load( url, function ( geometry, geometryBonds ) {
 
+				loader.load( url, function ( geometry, geometryBonds, json ) {
 
+
 
+					console.log( geometry, geometryBonds, json );
 
 
 					var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
 
 					var sphereGeometry = new THREE.IcosahedronGeometry( 1, 2 );
 
@@ -210,6 +214,17 @@
 
 						object.scale.multiplyScalar( 25 );
 
 						root.add( object );
 
 
+						var atom = json.atoms[ i ];
 
+
 
+						var text = document.createElement( 'div' );
 
+						text.className = 'label';
 
+						text.style.color = 'rgb(' + atom[ 3 ][ 0 ] + ',' + atom[ 3 ][ 1 ] + ',' + atom[ 3 ][ 2 ] + ')';
 
+						text.textContent = atom[ 4 ];
 
+
 
+						var label = new THREE.CSS2DObject( text );
 
+						label.position.copy( object.position );
 
+						root.add( label );
 
+
 
 					}
 
 
 					for ( var i = 0; i < geometryBonds.vertices.length; i += 2 ) {
 
@@ -244,6 +259,7 @@
 
 				camera.updateProjectionMatrix();
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				labelRenderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				render();
 
 
@@ -266,6 +282,7 @@
 
 			function render() {
 
 
 				renderer.render( scene, camera );
 
+				labelRenderer.render( scene, camera );
 
 
 			}