Nuclear Powered Mushroom

    icn3d

    3.19.4 • Public • Published

    icn3d

    "I see in 3D" (iCn3D) Structure Viewer is not only a web-based 3D viewer, but also a structure analysis tool interactively or in the batch mode using NodeJS scripts based on the npm package icn3d. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and annotations. Users' custom display can be saved in a short URL or a PNG image. More features are listed at iCn3D Doc.

    Installation

    iCn3D can be installed with the following command:

    npm install icn3d
    

    The following packages are required as shown in dependency:

    npm install jquery
    npm install jsdom
    npm install three
    

    Usage

    • Use icn3d to generate Node.js scripts

      To use icn3d to generate Node.js scripts, the source code is from this icn3d npm package. As shown in one example of Node.js script, part of the script can be like the following. All classes and functions can be accessed with the variable "icn3dui". The class structure is listed at iCn3D Doc.

        global.THREE = require('three');
        let jsdom = require('jsdom');
        global.$ = require('jquery')(new jsdom.JSDOM().window);
        
        let icn3d = require('icn3d');
        let icn3dui = new icn3d.iCn3DUI({});
      
    • Use icn3d as a 3D Viewer with React

      You can first specify the "dependencies.js" file as follows:

        import * as THREE from 'icn3d/three'
        import $ from 'jquery'
        import 'jquery-ui-bundle';
      
        import 'jquery-ui-bundle/jquery-ui.min.css';
      
        global.THREE = THREE
        global.$ = $
        global.jQuery = $
      

      Then specify the "icn3d-viewer.js" file as follows:

        import React, { useEffect } from "react";
        import './dependencies';
        
        import * as icn3d from 'icn3d/module'
        import "../node_modules/icn3d/css/icn3d.css"
      
        function Icn3dViewer() {
        	useEffect(() => {
        		const cfg = {
        			divid: 'viewer',
        			mobilemenu: true
        		};
        		cfg['mmdbid'] = '1tup';
        		const icn3dui = new icn3d.iCn3DUI(cfg);
        		icn3dui.show3DStructure();
        	}, []);
        	return <div id="viewer"></div>;
        }
      
        export default Icn3dViewer;
      
    • Use icn3d as a 3D Viewer with jQuery

      The source code is available in the iCn3D GitHub page. You can following the instruction at iCn3D Doc. The JavaScript code could be as simple as the following:

        var cfg = {'mmdbid': '1tup'};
        var icn3dui = new icn3d.iCn3DUI(cfg);
        icn3dui.show3DStructure();
      

    Install

    npm i icn3d

    DownloadsWeekly Downloads

    205

    Version

    3.19.4

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    12.1 MB

    Total Files

    38

    Last publish

    Collaborators

    • jiywang3