代码拉取完成，页面将自动刷新
<meta charset="UTF-8">
<html>
<head>
<title>oxDNA three.js viewer</title>
<!--Nice icons, from http://google.github.io/material-design-icons/-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Link external stylesheet files-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/justcontext.css">
<!--Set favicon-->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!--Keyboard shortcut modal-->
<div id="keyboardShortcuts" class="modal" onclick="toggleModal(this.id)">
<div class="modal-content">
<table>
<tr>
<th>Key</th>
<th>Action</th>
</tr>
<tr><td>p</td><td>Save image</td></tr>
<tr><td>s</td><td>Toggle selection mode</td></tr>
<tr><td>d</td><td>Toggle dragging mode</td></tr>
<tr><td>Right arrow</td><td>Next configuration</td></tr>
<tr><td>Left arrow</td><td>Previous configuration</td></tr>
<tr><td>ctrl/⌘-s</td><td>Save topology and configuration</td></tr>
<tr><td>ctrl/⌘-z</td><td>Undo edit</td></tr>
<tr><td>ctrl/⌘-shift-z (or ctrl/⌘-y)</td><td>Redo edit</td></tr>
<tr><td>ctrl/⌘-a</td><td>Select all elements</td></tr>
<tr><td>ctrl/⌘-i</td><td>Invert selection</td></tr>
<tr><td>ctrl/⌘-click</td><td>Select multiple elements</td></tr>
<tr><td>shift-click</td><td>Select intermediate monomers</td></tr>
<tr><td>Numpad1</td><td>Move camera to x-axis (ctrl/⌘ to invert)</td></tr>
<tr><td>Numpad2</td><td>Rotate camera down</td></tr>
<tr><td>Numpad3</td><td>Move camera to y-axis (ctrl/⌘ to invert)</td></tr>
<tr><td>Numpad4</td><td>Rotate camera left</td></tr>
<tr><td>Numpad5</td><td>Reset camera</td></tr>
<tr><td>Numpad6</td><td>Rotate camera right</td></tr>
<tr><td>Numpad7</td><td>Move camera to z-axis (ctrl/⌘ to invert)</td></tr>
<tr><td>Numpad8</td><td>Rotate camera up</td></tr>
<tr><td>F1</td><td>Show this list</td></tr>
</table>
</div>
</div>
<!--File Output-->
<div class="modal" id="fileOptions">
<div class="modal-content">
<p>Save the current stucture to oxDNA configuration and/or topology files</p>
<input type="checkbox" name="topDownload" title="identies and connections of particles" checked>Topology<br>
<input type="checkbox" name="datDownload" title="the xyz positions and rotations of particles" checked>Configuration<br>
<label for="outputFilename">File name: </label>
<input type="text" id="outputFilename" size="13" value="output" title="The prefix to name the .dat and .top files"><br>
<button style="width: 49%" onclick="toggleModal('fileOptions')" title="Cancel">Cancel</button>
<button style="width: 49%" onclick="makeOutputFiles()" title="Download the specified files">Download Files</button>
</div>
</div>
<!--Stl Export options-->
<div class="modal" id="stlExportOptions">
<div class="modal-content">
<!-- STLExporter(elements, , , , include_bbconnector, scale,faces_mul ); -->
<p>The viewer supports scene export in the common 3D printing STL format. For memory reasons one has the option to include just parts of the oxDNA model into the output mesh file, choosing from:</p>
<input type="checkbox" name="includeBackbone" title="include backbone mesh into output" checked>Backbone mesh<br>
<input type="checkbox" name="includeNucleoside" title="include nucleoside mesh into output" checked>Nucleoside mesh<br>
<input type="checkbox" name="includeConnector" title="include connector mesh into output" checked>Connector mesh<br>
<input type="checkbox" name="includeBBconnector" title="include backbone connector mesh into output" checked>Backbone connector mesh<br>
<p>By increasing the scaling of the model objects can be made to overlap, which is benefitial for sturdy printed models.</p>
<label for="stlScale">scale: </label>
<input type="number" value="1" id="stlScale" title="rescale the model" min=1 max = 10></br>
<p>The smoothness of the exported model is controlled via the faces multiplier setting. Note that additional smoothness results in very large STL files which not every browser can handle.</p>
<label for="facesMul">faces multiplier: </label>
<input type="number" value="1" id="facesMul" title="increases model smoothness" min=1 max=5><br>
<label for="outputSTLFilename">File name: </label>
<input type="text" id="outputSTLFilename" size="13" value="output" title="STL file name"><br><br>
<button style="width: 49%" onclick="toggleModal('stlExportOptions')" title="Cancel">Cancel</button>
<button style="width: 49%" onclick="makeSTLOutput()" title="Download the specified files">Download Files</button>
</div>
</div>
<!--Pause notices-->
<div id="pause" class="modal"></div>
<!--Initial instructions for drag and drop of files-->
<div id="dragInstruction">Drag and drop oxDNA .conf and .top files below</div>
<!--Sidebar-->
<div id="sidenav">
<div id="sidenavContent">
<button onclick="toggleModal('keyboardShortcuts')" type="button" title="Show keyboard shortcuts">Keyboard shortcuts</button>
<!--File-->
<fieldset>
<legend onclick="toggleFieldSet(this)">File</legend>
<div hidden="true">
<button onclick="makeOxViewJsonFile()" type="button" title="Download a file JSON file storing the current design">Download oxView file</button>
<button onclick="toggleModal('fileOptions')" type="button" title="Options for downloading the current scene">Download oxDNA Files</button>
<button onclick="toggleModal('stlExportOptions')" type="button" title="Options for STL export of the scene.">STL Export</button>
<button onclick="makeSequenceFile()" type="button" title="Download a file containing all sequences">Download sequences</button>
<button onclick="makePairTrapFile()" type="button" title="Download a mutual trap file for all basepairs">Download pair trap file</button>
<button onclick="toggleOptions('videoOptions')" type="button" title="Create a video of the trajectory starting with the current frame">Create Video</button>
</div>
</fieldset>
<!--Select-->
<fieldset>
<legend onclick="toggleFieldSet(this)">Select</legend>
<div hidden="true">
<input type="checkbox" name="action" id="selectToggle" value="Select" checked title="Hold down ctrl/⌘ for multiple selection"> Enable selection
<fieldset>
<legend onclick="toggleFieldSet(this)">Selection mode:</legend>
<div>
<input type="radio" name="scope" value="Monomer" checked>Monomer<br>
<input type="radio" name="scope" value="Strand">Strand<br>
<input type="radio" name="scope" value="System">System<br>
<input type="radio" name="scope" value="Cluster" title="Select by clusters calculated by DBSCAN" onchange="if (typeof elements.values().next().value.clusterId == 'undefined') {toggleOptions('clusterOptions');}"> Cluster <i class="material-icons" onclick="toggleOptions('clusterOptions')"
title="Clustering options" style="font-size: 1.5em; vertical-align: middle">tune</i><br>
<input type="radio" name="scope" value="Box" title="Draw a rectangle and select everything within it">Box<br>
<input type="checkbox" id="selectPairs" title="Select paired nucleotides">Select pairs<br>
</div>
</fieldset>
<textarea id="BaseList" cols="25" rows="3" name="textarea" readonly> Selected Bases List </textarea>
<button onclick="toggleOptions('baseInfoWindow')" type="button" title="Show selected base information">Show selected base info</button>
<button onclick="makeSelectedBasesFile()" type="button" title="Download plain-text file of selected bases">Download selected base list</button>
<button onclick="makeMutualTrapFile()" type="button" title="Create mutual trap file pairing every two bases in the selected base list">Download selected base trap file</button>
</div>
</fieldset>
<!--Edit-->
<fieldset>
<legend onclick="toggleFieldSet(this)">Edit</legend>
<div hidden="true">
<div style="text-align: center;">
<i class="material-icons" onclick="editHistory.undo()" title="Undo edit (ctrl/⌘-z)">undo</i>
<i class="material-icons" onclick="editHistory.redo()" title="Redo edit (ctrl/⌘-shift-z)">redo</i>
</div>
<fieldset>
<legend onclick="toggleFieldSet(this)">Mouse transformation</legend>
<div>
<input type="radio" name="transform" onchange="showTransformControl(this.value)" value="none" checked>None<br>
<input type="radio" name="transform" onchange="showTransformControl(this.value)" value="translate">Translate<br>
<input type="radio" name="transform" onchange="showTransformControl(this.value)" value="rotate">Rotate<br>
</div>
</fieldset>
<fieldset>
<legend onclick="toggleFieldSet(this)">Rotate</legend>
<div>
Axis:
<input type="radio" name="rotate" value="X" checked><span style="color: rgb(206, 54, 27)">X</span>
<!--default checked is x-axis-->
<input type="radio" name="rotate" value="Y"><span style="color: rgb(19, 102, 2)">Y</span>
<input type="radio" name="rotate" value="Z"><span style="color: rgb(30, 96, 196)">Z</span><br> Rotation angle:
<input type="number" value="-90" id="rotAngle" width="20">
<button onclick="rotateByInput()" title="rotate selected objects around center of mass specified by the selection mode by the rotation angle">Rotate</button>
</div>
</fieldset>
<fieldset>
<legend onclick="toggleFieldSet(this)">Edit Topology</legend>
<div>
<button onclick="nickWrapper()" title="break the upstream connection of the last selected particles">Nick</button>
<button onclick="deleteWrapper()" title="delete the selected monomers">Delete</button>
<button onclick="ligateWrapper()" title="ligate the last two selected particles together">Ligate</button><br>
Sequence:<input type="text" id="sequence" size="10" style="text-transform: uppercase;">
<button onclick="setSeqWrapper()" title="Apply the given sequence to the selected monomers">Set sequence</button>
<input type="checkbox" id="setCompl" title="Set also complementary bases" checked> Set compl<br>
<button onclick="extendWrapper()" title="Extend strand from the selected monomer with the given sequence">Extend</button>
<button onclick="createWrapper()" title="Create a new strand with the provided sequences">Create</button>
</div>
</fieldset>
<input type="checkbox" id="clusterSim" onchange="toggleClusterSim()">Rigid cluster dynamics<br>
<fieldset>
<legend onclick="toggleFieldSet(this)">PBC / Centering</legend>
<div>
<caption> PBC: </caption>
<select id="inboxing" title="At what scale to apply periodic boundary conditions">
<option>Monomer</option>
<option>Strand</option>
<option>None</option>
</select>
<br>
<caption>Centering:</caption>
<select id="centering" title="Where to center the structure relative to the simulation box" onchange="redrawBox()">
<option>Origin</option>
<option>Box Center</option>
<option>None</option>
</select>
<br>
<button onclick="centerAndPBC()" type="button" title="Note that this only works if you're going from none to something else or if you want to re-center after moving">Apply</button>
</div>
</fieldset>
</div>
<input type="checkbox" name="action" id="selectToggle" value="Select" checked title="Hold down ctrl/⌘ for multiple selection"> Select
<input type="checkbox" name="action" id="transformToggle" value="Transform" onchange="showTransformControl(this)"> Transform<br>
<fieldset>
<legend>Selection mode:</legend>
<input type="radio" name="scope" value="Monomer" checked>Monomer<br>
<input type="radio" name="scope" value="Strand">Strand<br>
<input type="radio" name="scope" value="System">System<br>
<input type="radio" name="scope" value="Cluster" title="Select by clusters calculated by DBSCAN" onchange="if (typeof elements.values().next().value.clusterId == 'undefined') {toggleOptions('clusterOptions');}"> Cluster <i class="material-icons" onclick="toggleOptions('clusterOptions')"
title="Clustering options" style="font-size: 1.5em; vertical-align: middle">tune</i><br>
<input type="radio" name="scope" value="Box" title="Draw a rectangle and select everything within it">Box<br>
<input type="checkbox" id="selectPairs" title="Select paired nucleotides">Select pairs<br>
</fieldset>
<fieldset>
<legend>Rotate:</legend>
Axis:
<input type="radio" name="rotate" value="X" checked><span style="color: rgb(206, 54, 27)">X</span>
<!--default checked is x-axis-->
<input type="radio" name="rotate" value="Y"><span style="color: rgb(19, 102, 2)">Y</span>
<input type="radio" name="rotate" value="Z"><span style="color: rgb(30, 96, 196)">Z</span><br> Rotation angle:
<input type="number" value="-90" id="rotAngle" width="20">
<button onclick="rotateByInput()" title="rotate selected objects around center of mass specified by the selection mode by the rotation angle">Rotate</button>
</fieldset>
<fieldset>
<legend>Edit Topology</legend>
<button onclick="nickWrapper()" title="break the upstream connection of the last selected particles">Nick</button>
<button onclick="deleteWrapper()" title="delete the selected monomers">Delete</button>
<button onclick="ligateWrapper()" title="ligate the last two selected particles together">Ligate</button><br>
Sequence:<input type="text" id="sequence" size="10" style="text-transform: uppercase;">
<button onclick="setSeqWrapper()" title="Apply the given sequence to the selected monomers">Set sequence</button>
<input type="checkbox" id="setCompl" title="Set also complementary bases" checked> Set compl<br>
<button onclick="extendWrapper()" title="Extend strand from the selected monomer with the given sequence">Extend</button>
<button onclick="createWrapper()" title="Create a new strand with the provided sequences">Create</button>
</fieldset>
<input type="checkbox" id="clusterSim" onchange="toggleClusterSim()">Rigid cluster dynamics<br>
</fieldset>
<!--View-->
<fieldset>
<legend onclick="toggleFieldSet(this)">View</legend>
<div hidden="true">
<input type="checkbox" id="arrowToggle" onchange="toggleArrows(this)" title="Show/hide the coordinate axes" checked>Display Arrows<br>
<input type="checkbox" id="boxToggle" onchange="toggleBox(this)" title="Show/hide the bounding box">Display Box<br>
<fieldset>
<legend>Color by:</legend>
<input type="radio" name="coloring" value="Strand" onchange="coloringChanged()" checked>Strand
<input type="radio" name="coloring" value="Cluster" onchange="coloringChanged()">Cluster
<input type="radio" name="coloring" value="System" onchange="coloringChanged()">System
<input type="radio" name="coloring" value="Overlay" onchange="coloringChanged()">Overlay
</fieldset>
<input type="checkbox" id="backgroundToggle" onchange="toggleBackground()" title="White or black background?">Toggle Background Color<br>
<button onclick="toggleOptions('colorOptions'); colorOptions()" type="button" title="modify the default strand colors">Edit
Colors</button>
<button onclick="controls.reset()" type="button" title="moves camera to default position (100,0,0)">Reset Camera</button>
<button onclick="api.switchCamera()" id="cameraSwitch" type="button" title="Switches between perspective and orthographic cameras">Orthographic</button>
<button onclick="toggleOptions('fogOptions')" type="button" title="View fog options">Fog</button>
<button onclick="toggleOptions('hierarchy'); drawSystemHierarchy();" type="button" title="View system hierarchy">System hierarchy</button>
</div>
</fieldset>
<!--Trajectory-->
<fieldset>
<legend onclick="toggleFieldSet(this)">Trajectory</legend>
<div hidden=true>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
<p id="trajTimestep" hidden="true"></p>
<i class="material-icons" onclick="trajReader.previousConfig()" style="font-size: 32px;" title="Previous config (left keyboard arrow)">skip_previous</i>
<i class="material-icons" onclick="trajReader.nextConfig()" style="font-size: 32px;" title="Next config (right keyboard arrow)">skip_next</i>
</div>
<p>
<i id="trajPrevUntilBtn" class="inline-icon material-icons" onclick="trajReader.stepUntil(parseInt(document.getElementById('trajPrevLim').value), true)" title="Click to rewind">fast_rewind</i> until t ≤
<input type="number" id="trajPrevLim" style="width: 6em;" value="0" min="0" title="Input trajectory step at which to stop rewinding.">
</p>
<p>
<i id="trajNextUntilBtn" class="inline-icon material-icons" onclick="trajReader.stepUntil(parseInt(document.getElementById('trajNextLim').value), false)" title="Click to play">fast_forward</i> until t ≥
<input type="number" id="trajNextLim" style="width: 6em;" value="-1" title="Input trajectory step at which to stop playback. Input a negative number to play until the end.">
</p>
</div>
</fieldset>
</div>
<button id="sideNavToggleButton" onclick="toggleSideNav()" type="button" style="background-color: #acc; border: 0px; height: 20px; padding: 0px;">hide toolbar</button>
</div>
<!--Extra option windows-->
<div style="position: absolute; bottom: 0px; overflow-y: scroll; max-height: 100%;">
<!--Video-->
<div class="opts" id="videoOptions" hidden="true">
<div style="text-align: right; background-color: #acc">
<i class="material-icons" onclick="toggleOptions('videoOptions')">close</i>
</div>
<label for="videoType">Video type:</label>
<select id="videoType" onchange="document.getElementById('videoLeminiscateOpts').hidden = this.selectedIndex == 0;">
<option value="trajectory">Trajectory</option>
<option value="lemniscate">XY lemniscate</option>
</select>
<fieldset>
<legend onclick="toggleFieldSet(this)">File format:</legend>
<input type="radio" name="videoFormat" value="webm" checked>webm (Chrome only!)<br>
<input type="radio" name="videoFormat" value="gif">gif<br>
<input type="radio" name="videoFormat" value="png">png<br>
<input type="radio" name="videoFormat" value="jpg">jpg<br>
</fieldset>
<label for="videoFramerate">Framerate:</label>
<input type="number" value="24" id="videoFramerate" width="20">fps
<div id="videoLeminiscateOpts" hidden="true">
<label for="videoDuration">Duration:</label>
<input type="number" value="20" id="videoDuration" width="20">s
</div>
<button id="videoStartStop" onclick="createVideo()">Start</button>
</div>
<!--Color-->
<div class="opts" id="colorOptions" hidden="true">
<div style="text-align: right; background-color: #acc">
<i class="material-icons" onclick="toggleOptions('colorOptions'); colorOptions()">close</i>
</div>
Click a color to edit, right click to remove:
<div id="colorOptionContent" style="background-color: inherit"></div>
</div>
<!--Hierarchy-->
<div class="opts" id="hierarchy" hidden="true">
<div style="text-align: right; background-color: #acc">
<i class="material-icons" onclick="toggleOptions('hierarchy')">close</i>
</div>
<div id="hierarchyContent" style="background-color: inherit"></div>
</div>
<!--Clustering-->
<div class="opts" id="clusterOptions" hidden="true">
<div style="text-align: right; background-color: #acc">
<i class="material-icons" onclick="toggleOptions('clusterOptions')">close</i>
</div>
<fieldset>
<legend onclick="toggleFieldSet(this)">Automatic</legend>
<label for="minPts">Min points: </label>
<input type="number" value="6" id="minPts" title="Minimum number of nucleotides in a cluster" min=1><br>
<label for="epsilon">Max dist (ε): </label>
<input type="number" value="3" id="epsilon" title="Max distance between cluster neigbours" min=0>
<button onclick="calculateClusters()">Start clustering</button>
</fieldset>
<fieldset>
<legend onclick="toggleFieldSet(this)">Manual</legend>
<button onclick="selectionToCluster()" title="Add all selected elements to a new cluster">Selection to
cluster</button>
<button onclick="clearClusters()" title="Remove all clusters">Clear clusters</button>
</fieldset>
</div>
<!--Fog-->
<div class="opts" id="fogOptions" hidden="true">
<div style="text-align: right; background-color: #acc">
<i class="material-icons" onclick="toggleOptions('fogOptions')">close</i>
</div>
<label for="fogNear">Near: </label>
<input type="number" value="1" id="fogNear" title="Minimum distance to apply fog" min=0 onchange="if(scene.fog!=null){setFog();}"><br>
<label for="fogNear">Far: </label>
<input type="number" value="200" id="fogFar" title="Maximum distance to apply fog" min=0 onchange="if(scene.fog!=null){setFog();}"><br>
<button onclick="toggleFog()">Toggle fog</button>
</div>
<!--Base info-->
<div class="opts" id="baseInfoWindow" hidden="true">
<div style="text-align: right; background-color: #acc">
<i class="material-icons" onclick="toggleOptions('baseInfoWindow')">close</i>
</div>
Selected Base Info:
<textarea id="BaseInfo" cols="25" rows="10" name="textarea" readonly></textarea>
</div>
</div>
<!--Notices-->
<div id="noticeboard" style="position: absolute; bottom: 0px; overflow-y: scroll; width: 100%; max-height: 100%;"></div>
<!--Canvas-->
<div id="container">
<div><canvas id="colorbarCanvas"></canvas></div>
</div>
<canvas id="threeCanvas" tabindex="1" class="jctx-host jctx-id-canvas"></canvas>
<!-- Context menu-->
<ul class="jctx jctx-id-canvas jctx-white jctx-white-shadow">
<li data-action="undo">Undo (ctrl/⌘+Z)</li>
<li data-action="redo">Redo (ctrl/⌘+Y)</li>
<hr>
<li data-action="del">Delete (del)</li>
<li data-action="cut">Cut (ctrl/⌘+X)</li>
<li data-action="copy">Copy (ctrl/⌘+C)</li>
<li data-action="paste">Paste (ctrl/⌘+V)</li>
<hr>
<li data-action="all">Select all (ctrl/⌘+A)</li>
<li data-action="invert">Invert selection (ctrl/⌘+I)</li>
<li data-action="clear">Clear selection</li>
</ul>
<div class="main">
<!--all files to be loaded onload of html file-->
<script src="./ts/lib/CCapture.all.min.js"></script>
<script src="./ts/lib/three.js"></script>
<script src="./ts/lib/Lut.js"></script>
<script src="./ts/lib/VRButton.js"></script>
<script src="./ts/lib/justcontext.js"></script>
<script src="./ts/controls/TransformControls.js"></script>
<script src="./ts/controls/TrackballControls.js"></script>
<script src="./dist/scene/scene_setup.js"></script>
<script src="./dist/scene/instancing.js"></script>
<script src="./dist/scene/mesh_setup.js"></script>
<script src="./dist/file_handling/io.js"></script>
<script src="./dist/scene/PBC_switchbox.js"></script>
<script src="./dist/file_handling/file_reading.js"></script>
<script src="./dist/editing/editing.js"></script>
<script src="./dist/editing/doUndo.js"></script>
<script src="./dist/editing/dijkstra.js"></script>
<script src="./dist/editing/rigid-body_simulation.js"></script>
<script src="./dist/main.js"></script>
<script src="./dist/model/basicElement.js"></script>
<script src="./dist/model/aminoAcid.js"></script>
<script src="./dist/model/nucleotide.js"></script>
<script src="./dist/model/DNA.js"></script>
<script src="./dist/model/RNA.js"></script>
<script src="./dist/model/strand.js"></script>
<script src="./dist/model/system.js"></script>
<script src="./dist/UI/base_selector.js"></script>
<script src="./dist/UI/keybindings.js"></script>
<script src="./dist/UI/UI.js"></script>
<script src="./dist/file_handling/output_file.js"></script>
<script src="./dist/file_handling/video.js"></script>
<script src="./dist/editing/translation.js"></script>
<script src="./ts/controls/SceneUtils.js"></script>
<script src="./dist/api/scene_api.js"></script>
<script src="./dist/api/editing_api.js"></script>
<script src="./dist/editing/clustering.js"></script>
<script src="./dist/file_handling/stl_exporter.js"></script>
<script src="./dist/vr.js"></script>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手