master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_loader_pdb.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - molecules</title>
    <meta charset="utf-8">
    <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">
    <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 {
        text-shadow: -1px 1px 1px rgb(0,0,0);
        margin-left: 25px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D webgl</a> - molecules</div>
    <div id="menu"></div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { TrackballControls } from './jsm/controls/TrackballControls.js';
      import { PDBLoader } from './jsm/loaders/PDBLoader.js';
      import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';

      let camera, scene, renderer, labelRenderer;
      let controls;

      let root;

      const MOLECULES = {
        "Ethanol": "ethanol.pdb",
        "Aspirin": "aspirin.pdb",
        "Caffeine": "caffeine.pdb",
        "Nicotine": "nicotine.pdb",
        "LSD": "lsd.pdb",
        "Cocaine": "cocaine.pdb",
        "Cholesterol": "cholesterol.pdb",
        "Lycopene": "lycopene.pdb",
        "Glucose": "glucose.pdb",
        "Aluminium oxide": "Al2O3.pdb",
        "Cubane": "cubane.pdb",
        "Copper": "cu.pdb",
        "Fluorite": "caf2.pdb",
        "Salt": "nacl.pdb",
        "YBCO superconductor": "ybco.pdb",
        "Buckyball": "buckyball.pdb",
        "Graphite": "graphite.pdb"
      };

      const loader = new PDBLoader();
      const offset = new v3d.Vector3();

      const menu = document.getElementById('menu');

      init();
      animate();

      function init() {

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0x050505);

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
        camera.position.z = 1000;
        scene.add(camera);

        const light1 = new v3d.DirectionalLight(0xffffff, 0.8);
        light1.position.set(1, 1, 1);
        scene.add(light1);

        const light2 = new v3d.DirectionalLight(0xffffff, 0.5);
        light2.position.set(- 1, - 1, 1);
        scene.add(light2);

        root = new v3d.Group();
        scene.add(root);

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('container').appendChild(renderer.domElement);

        labelRenderer = new CSS2DRenderer();
        labelRenderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.domElement.style.position = 'absolute';
        labelRenderer.domElement.style.top = '0px';
        labelRenderer.domElement.style.pointerEvents = 'none';
        document.getElementById('container').appendChild(labelRenderer.domElement);

        //

        controls = new TrackballControls(camera, renderer.domElement);
        controls.minDistance = 500;
        controls.maxDistance = 2000;

        //

        loadMolecule('models/pdb/caffeine.pdb');
        createMenu();

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      //

      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), false);

        }

      }

      //

      function loadMolecule(url) {

        while (root.children.length > 0) {

          const object = root.children[0];
          object.parent.remove(object);

        }

        loader.load(url, function(pdb) {

          const geometryAtoms = pdb.geometryAtoms;
          const geometryBonds = pdb.geometryBonds;
          const json = pdb.json;

          const boxGeometry = new v3d.BoxBufferGeometry(1, 1, 1);
          const sphereGeometry = new v3d.IcosahedronBufferGeometry(1, 3);

          geometryAtoms.computeBoundingBox();
          geometryAtoms.boundingBox.getCenter(offset).negate();

          geometryAtoms.translate(offset.x, offset.y, offset.z);
          geometryBonds.translate(offset.x, offset.y, offset.z);

          let positions = geometryAtoms.getAttribute('position');
          const colors = geometryAtoms.getAttribute('color');

          const position = new v3d.Vector3();
          const color = new v3d.Color();

          for (let i = 0; i < positions.count; i++) {

            position.x = positions.getX(i);
            position.y = positions.getY(i);
            position.z = positions.getZ(i);

            color.r = colors.getX(i);
            color.g = colors.getY(i);
            color.b = colors.getZ(i);

            const material = new v3d.MeshPhongMaterial({ color: color });

            const object = new v3d.Mesh(sphereGeometry, material);
            object.position.copy(position);
            object.position.multiplyScalar(75);
            object.scale.multiplyScalar(25);
            root.add(object);

            const atom = json.atoms[i];

            const text = document.createElement('div');
            text.className = 'label';
            text.style.color = 'rgb(' + atom[3][0] + ',' + atom[3][1] + ',' + atom[3][2] + ')';
            text.textContent = atom[4];

            const label = new CSS2DObject(text);
            label.position.copy(object.position);
            root.add(label);

          }

          positions = geometryBonds.getAttribute('position');

          const start = new v3d.Vector3();
          const end = new v3d.Vector3();

          for (let i = 0; i < positions.count; i += 2) {

            start.x = positions.getX(i);
            start.y = positions.getY(i);
            start.z = positions.getZ(i);

            end.x = positions.getX(i + 1);
            end.y = positions.getY(i + 1);
            end.z = positions.getZ(i + 1);

            start.multiplyScalar(75);
            end.multiplyScalar(75);

            const object = new v3d.Mesh(boxGeometry, new v3d.MeshPhongMaterial(0xffffff));
            object.position.copy(start);
            object.position.lerp(end, 0.5);
            object.scale.set(5, 5, start.distanceTo(end));
            object.lookAt(end);
            root.add(object);

          }

          render();

        });

      }

      //

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.setSize(window.innerWidth, window.innerHeight);

        render();

      }

      function animate() {

        requestAnimationFrame(animate);
        controls.update();

        const time = Date.now() * 0.0004;

        root.rotation.x = time;
        root.rotation.y = time * 0.7;

        render();

      }

      function render() {

        renderer.render(scene, camera);
        labelRenderer.render(scene, camera);

      }

    </script>
  </body>
</html>