|
|
@@ -1,5 +1,5 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
+<html lang="en">
|
|
|
<head>
|
|
|
<title>three.js webgl - molecules</title>
|
|
|
<meta charset="utf-8">
|
|
|
@@ -96,13 +96,12 @@
|
|
|
"Salt": "nacl.pdb",
|
|
|
"YBCO superconductor": "ybco.pdb",
|
|
|
"Buckyball": "buckyball.pdb",
|
|
|
- //"Diamond": "diamond.pdb",
|
|
|
"Graphite": "graphite.pdb"
|
|
|
};
|
|
|
|
|
|
var loader = new THREE.PDBLoader();
|
|
|
|
|
|
- var menu = document.getElementById( "menu" );
|
|
|
+ var menu = document.getElementById( 'menu' );
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
|
@@ -149,7 +148,7 @@
|
|
|
|
|
|
//
|
|
|
|
|
|
- loadMolecule( "models/molecules/caffeine.pdb" );
|
|
|
+ loadMolecule( 'models/molecules/caffeine.pdb' );
|
|
|
createMenu();
|
|
|
|
|
|
//
|
|
|
@@ -178,7 +177,7 @@
|
|
|
button.innerHTML = m;
|
|
|
menu.appendChild( button );
|
|
|
|
|
|
- var url = "models/molecules/" + MOLECULES[ m ];
|
|
|
+ var url = 'models/molecules/' + MOLECULES[ m ];
|
|
|
|
|
|
button.addEventListener( 'click', generateButtonCallback( url ), false );
|
|
|
|
|
|
@@ -197,16 +196,20 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- loader.load( url, function ( geometry, geometryBonds, json ) {
|
|
|
+ loader.load( url, function ( result ) {
|
|
|
+
|
|
|
+ var geometryAtoms = result.geometryAtoms;
|
|
|
+ var geometryBonds = result.geometryBonds;
|
|
|
+ var json = result.json;
|
|
|
|
|
|
var boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
|
|
|
var sphereGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
|
|
|
|
|
|
- var offset = geometry.center();
|
|
|
+ var offset = geometryAtoms.center();
|
|
|
geometryBonds.translate( offset.x, offset.y, offset.z );
|
|
|
|
|
|
- var positions = geometry.getAttribute( 'position' );
|
|
|
- var colors = geometry.getAttribute( 'color' );
|
|
|
+ var positions = geometryAtoms.getAttribute( 'position' );
|
|
|
+ var colors = geometryAtoms.getAttribute( 'color' );
|
|
|
|
|
|
var position = new THREE.Vector3();
|
|
|
var color = new THREE.Color();
|
|
|
@@ -221,8 +224,6 @@
|
|
|
color.g = colors.getY( i );
|
|
|
color.b = colors.getZ( i );
|
|
|
|
|
|
- var element = geometry.elements[ i ];
|
|
|
-
|
|
|
var material = new THREE.MeshPhongMaterial( { color: color } );
|
|
|
|
|
|
var object = new THREE.Mesh( sphereGeometry, material );
|
|
|
@@ -273,17 +274,6 @@
|
|
|
|
|
|
render();
|
|
|
|
|
|
- }, function ( xhr ) {
|
|
|
-
|
|
|
- if ( xhr.lengthComputable ) {
|
|
|
-
|
|
|
- var percentComplete = xhr.loaded / xhr.total * 100;
|
|
|
- console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }, function ( xhr ) {
|
|
|
-
|
|
|
} );
|
|
|
|
|
|
}
|
Mugen87