icn3d

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"
  
    async function Icn3dViewer() {
    	useEffect(() => {
    		const cfg = {
    			divid: 'viewer',
    			mobilemenu: true
    		};
    		cfg['mmdbid'] = '1tup';
    		const icn3dui = new icn3d.iCn3DUI(cfg);
    		await 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);
    await icn3dui.show3DStructure();