mschoi/3Dmol.js
1
0
Fork 0
mirror of https://github.com/3dmol/3Dmol.js.git synced 2026-06-04 08:39:49 +09:00
Code Issues Packages Projects Releases Wiki Activity

Add example with es6 module and umd imports

Browse Source
This commit is contained in:
Alex Ford
2025-05-07 15:02:19 +00:00
parent 138c533c70
commit 59215e2605
2 changed files with 93 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
examples/module.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ES6 Module Example</title>
<style>
.mol-container {
width: 60%;
height: 800px;
position: relative;
}
</style>
</head>
<body>
<div id="container-01" class="mol-container"></div>
<script type="module">
import * as $3Dmol from "../build/3Dmol.es6.js";
console.log($3Dmol);
let element = document.querySelector("#container-01");
let config = {};
let viewer = $3Dmol.createViewer(element, config);
let pdbUri = "https://files.rcsb.org/download/1YCR.pdb";
$3Dmol.get(pdbUri).then(
function (data) {
console.log("Loaded PDB " + pdbUri);
let v = viewer;
v.addModel(data, "pdb"); /* load data */
v.setStyle(
{},
{ cartoon: { color: "spectrum" } },
); /* style all atoms */
v.zoomTo(); /* set camera */
v.render(); /* render scene */
v.zoom(1.2, 1000); /* slight zoom */
v.setBackgroundColor('white');
console.log("displayed", viewer);
},
function () {
console.error("Failed to load PDB " + pdbUri);
},
);
</script>
</body>
</html>

46
examples/standard.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ES6 Module Example</title>
<style>
.mol-container {
width: 60%;
height: 800px;
position: relative;
}
</style>
<script src="../build/3Dmol.js"></script>
</head>
<body>
<div id="container-01" class="mol-container"></div>
<script>
console.log($3Dmol);
let element = document.querySelector("#container-01");
let config = {};
let viewer = $3Dmol.createViewer(element, config);
let pdbUri = "https://files.rcsb.org/download/1YCR.pdb";
$3Dmol.get(pdbUri).then(
function (data) {
console.log("Loaded PDB " + pdbUri);
let v = viewer;
v.addModel(data, "pdb"); /* load data */
v.setStyle(
{},
{ cartoon: { color: "spectrum" } },
); /* style all atoms */
v.zoomTo(); /* set camera */
v.render(); /* render scene */
v.zoom(1.2, 1000); /* slight zoom */
v.setBackgroundColor('white');
console.log("displayed", viewer);
},
function () {
console.error("Failed to load PDB " + pdbUri);
},
);
</script>
</body>
</html>