Accueil Explorer Aide
Connexion
javascript
/
three.js
miroir de https://github.com/tazdij/three.js.git
2
0
Fork 0
Fichiers Tickets 0 Wiki
Parcourir la source

Examples: Improve molecule demos. (#24153)

* Examples: Improve molecule demos.

* Examples: Clean up.

* Examples: More clean up.
Michael Herzog il y a 3 ans
Parent
fc357b9cec
commit
0a99c633db
2 fichiers modifiés avec 38 ajouts et 160 suppressions
Vue unifiée Afficher les stats Diff
  1. 25 105
      examples/css3d_molecules.html
  2. 13 55
      examples/webgl_loader_pdb.html

+ 25 - 105
examples/css3d_molecules.html
Voir le fichier 

@@ -10,44 +10,6 @@
 
 				background-color: #050505;
 
 				background-color: #050505;
 
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
 
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
 
 			}
 
 			}
 
-
 
-			#topmenu {
 
-				position: absolute;
 
-				top: 50px;
 
-				width: 100%;
 
-				padding: 10px;
 
-				box-sizing: border-box;
 
-				text-align: center;
 
-			}
 
-
 
-			#menu {
 
-				position: absolute;
 
-				bottom: 20px;
 
-				width: 100%;
 
-				padding: 10px;
 
-				box-sizing: border-box;
 
-				text-align: center;
 
-			}
 
-
 
-			button {
 
-				color: rgb(255,255,255);
 
-				background: rgb(255,255,255,0.1);
 
-				border: 0px;
 
-				padding: 5px 10px;
 
-				margin: 2px;
 
-				font-size: 14px;
 
-				cursor: pointer;
 
-			}
 
-
 
-				button:hover {
 
-					background-color: rgba(0,255,255,0.5);
 
-				}
 
-
 
-				button:active {
 
-					color: #000000;
 
-					background-color: rgba(0,255,255,1);
 
-				}
 
-
 
 			.bond {
 
 			.bond {
 
 				width: 5px;
 
 				width: 5px;
 
 				height: 10px;
 
 				height: 10px;
 
@@ -59,10 +21,6 @@
 
 	<body>
 
 	<body>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
 
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
 
-		<div id="topmenu">
 
-			<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
 
-		</div>
 
-		<div id="menu"></div>
 
 
 
 		<!-- Import maps polyfill -->
 
 		<!-- Import maps polyfill -->
 
 		<!-- Remove this when import maps will be widely supported -->
 
 		<!-- Remove this when import maps will be widely supported -->
 
@@ -83,6 +41,7 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 
 			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
 
 			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
 
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 
 
 			let camera, scene, renderer;
 
 			let camera, scene, renderer;
 
 			let controls;
 
 			let controls;
 
@@ -95,7 +54,11 @@
 
 			const tmpVec4 = new THREE.Vector3();
 
 			const tmpVec4 = new THREE.Vector3();
 
 			const offset = new THREE.Vector3();
 
 			const offset = new THREE.Vector3();
 
 
 
-			let visualizationType = 2;
 
+			const VIZ_TYPE = {
 
+				'Atoms': 0,
 
+				'Bonds': 1,
 
+				'Atoms + Bonds': 2
 
+			};
 
 
 
 			const MOLECULES = {
 
 			const MOLECULES = {
 
 				'Ethanol': 'ethanol.pdb',
 
 				'Ethanol': 'ethanol.pdb',
 
@@ -118,12 +81,15 @@
 
 				'Graphite': 'graphite.pdb'
 
 				'Graphite': 'graphite.pdb'
 
 			};
 
 			};
 
 
 
+			const params = {
 
+				vizType: 2,
 
+				molecule: 'caffeine.pdb'
 
+			};
 
+
 
 			const loader = new PDBLoader();
 
 			const loader = new PDBLoader();
 
 			const colorSpriteMap = {};
 
 			const colorSpriteMap = {};
 
 			const baseSprite = document.createElement( 'img' );
 
 			const baseSprite = document.createElement( 'img' );
 
 
 
-			const menu = document.getElementById( 'menu' );
 
-
 
 			init();
 
 			init();
 
 			animate();
 
 			animate();
 
 
 
@@ -152,8 +118,7 @@
 
 
 
 				baseSprite.onload = function () {
 
 				baseSprite.onload = function () {
 
 
 
-					loadMolecule( 'models/pdb/caffeine.pdb' );
 
-					createMenu();
 
+					loadMolecule( params.molecule );
 
 
 
 				};
 
 				};
 
 
 
@@ -163,56 +128,21 @@
 
 
 
 				window.addEventListener( 'resize', onWindowResize );
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 
-			}
 
-
 
-			//
 
-
 
-			function generateButtonCallback( url ) {
 
-
 
-				return function () {
 
+				//
 
 
 
-					loadMolecule( url );
 
+				const gui = new GUI();
 
 
 
-				};
 
+				gui.add( params, 'vizType', VIZ_TYPE ).onChange( changeVizType );
 
+				gui.add( params, 'molecule', MOLECULES ).onChange( loadMolecule );
 
+				gui.open();
 
 
 
 			}
 
 			}
 
 
 
-			function createMenu() {
 
-
 
-				for ( const m in MOLECULES ) {
 
-
 
-					const button = document.createElement( 'button' );
 
-					button.innerHTML = m;
 
-					menu.appendChild( button );
 
+			function changeVizType( value ) {
 
 
 
-					const url = 'models/pdb/' + MOLECULES[ m ];
 
-
 
-					button.addEventListener( 'click', generateButtonCallback( url ) );
 
-
 
-				}
 
-
 
-				const b_a = document.getElementById( 'b_a' );
 
-				const b_b = document.getElementById( 'b_b' );
 
-				const b_ab = document.getElementById( 'b_ab' );
 
-
 
-				b_a.addEventListener( 'click', function () {
 
-
 
-					visualizationType = 0;
 
-					showAtoms();
 
-
 
-				} );
 
-				b_b.addEventListener( 'click', function () {
 
-
 
-					visualizationType = 1;
 
-					showBonds();
 
-
 
-				} );
 
-				b_ab.addEventListener( 'click', function () {
 
-
 
-					visualizationType = 2;
 
-					showAtomsBonds();
 
-
 
-				} );
 
+				if ( value === 0 ) showAtoms();
 
+				else if ( value === 1 ) showBonds();
 
+				else showAtomsBonds();
 
 
 
 			}
 
 			}
 
 
 
@@ -322,7 +252,9 @@
 
 
 
 			//
 
 			//
 
 
 
-			function loadMolecule( url ) {
 
+			function loadMolecule( model ) {
 
+
 
+				const url = 'models/pdb/' + model;
 
 
 
 				for ( let i = 0; i < objects.length; i ++ ) {
 
 				for ( let i = 0; i < objects.length; i ++ ) {
 
 
 
@@ -471,19 +403,7 @@
 
 
 
 					//console.log( "CSS3DObjects:", objects.length );
 
 					//console.log( "CSS3DObjects:", objects.length );
 
 
 
-					switch ( visualizationType ) {
 
-
 
-						case 0:
 
-							showAtoms();
 
-							break;
 
-						case 1:
 
-							showBonds();
 
-							break;
 
-						case 2:
 
-							showAtomsBonds();
 
-							break;
 
-
 
-					}
 
+					changeVizType( params.vizType );
 
 
 
 				} );
 
 				} );

+ 13 - 55
examples/webgl_loader_pdb.html
Voir le fichier 

@@ -6,30 +6,6 @@
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 		<style>
 
-			#menu {
 
-				position: absolute;
 
-				bottom: 20px;
 
-				width: 100%;
 
-				text-align: center;
 
-				padding: 0;
 
-				margin: 0;
 
-			}
 
-
 
-			button {
 
-				color: rgb(255,255,255);
 
-				background: transparent;
 
-				border: 0px;
 
-				padding: 5px 10px;
 
-				cursor: pointer;
 
-			}
 
-			button:hover {
 
-				background-color: rgba(0,255,255,0.5);
 
-			}
 
-			button:active {
 
-				color: #000000;
 
-				background-color: rgba(0,255,255,1);
 
-			}
 
-
 
 			.label {
 
 			.label {
 
 				text-shadow: -1px 1px 1px rgb(0,0,0);
 
 				text-shadow: -1px 1px 1px rgb(0,0,0);
 
 				margin-left: 25px;
 
 				margin-left: 25px;
 
@@ -40,7 +16,6 @@
 
 	<body>
 
 	<body>
 
 		<div id="container"></div>
 
 		<div id="container"></div>
 
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - molecules</div>
 
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - molecules</div>
 
-		<div id="menu"></div>
 
 
 
 		<!-- Import maps polyfill -->
 
 		<!-- Import maps polyfill -->
 
 		<!-- Remove this when import maps will be widely supported -->
 
 		<!-- Remove this when import maps will be widely supported -->
 
@@ -61,6 +36,7 @@
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
 
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 
 
 			let camera, scene, renderer, labelRenderer;
 
 			let camera, scene, renderer, labelRenderer;
 
 			let controls;
 
 			let controls;
 
@@ -87,11 +63,13 @@
 
 				'Graphite': 'graphite.pdb'
 
 				'Graphite': 'graphite.pdb'
 
 			};
 
 			};
 
 
 
+			const params = {
 
+				molecule: 'caffeine.pdb'
 
+			};
 
+
 
 			const loader = new PDBLoader();
 
 			const loader = new PDBLoader();
 
 			const offset = new THREE.Vector3();
 
 			const offset = new THREE.Vector3();
 
 
 
-			const menu = document.getElementById( 'menu' );
 
-
 
 			init();
 
 			init();
 
 			animate();
 
 			animate();
 
 
 
@@ -137,46 +115,26 @@
 
 
 
 				//
 
 				//
 
 
 
-				loadMolecule( 'models/pdb/caffeine.pdb' );
 
-				createMenu();
 
+				loadMolecule( params.molecule );
 
 
 
 				//
 
 				//
 
 
 
 				window.addEventListener( 'resize', onWindowResize );
 
 				window.addEventListener( 'resize', onWindowResize );
 
 
 
-			}
 
-
 
-			//
 
-
 
-			function generateButtonCallback( url ) {
 
-
 
-				return function () {
 
-
 
-					loadMolecule( url );
 
-
 
-				};
 
-
 
-			}
 
-
 
-			function createMenu() {
 
-
 
-				for ( const m in MOLECULES ) {
 
-
 
-					const button = document.createElement( 'button' );
 
-					button.innerHTML = m;
 
-					menu.appendChild( button );
 
-
 
-					const url = 'models/pdb/' + MOLECULES[ m ];
 
+				//
 
 
 
-					button.addEventListener( 'click', generateButtonCallback( url ) );
 
+				const gui = new GUI();
 
 
 
-				}
 
+				gui.add( params, 'molecule', MOLECULES ).onChange( loadMolecule );
 
+				gui.open();
 
 
 
 			}
 
 			}
 
 
 
 			//
 
 			//
 
 
 
-			function loadMolecule( url ) {
 
+			function loadMolecule( model ) {
 
+
 
+				const url = 'models/pdb/' + model;
 
 
 
 				while ( root.children.length > 0 ) {
 
 				while ( root.children.length > 0 ) {