addBox() - Create 3D Boxes
Q
How to create 3D Boxes with 3Dmol.js addBox() methods?
✍: FYIcenter.com
A
viewer.addBox() method in the $3Dmol.GLViewer class
allows you to create 3D box objects.
Here is the signature of the addBox() method:
{$3Dmol.GLViewer} addBox({BoxSpec} spec) -> {$3Dmol.GLShape}
Here is an HTML code example, Draw-Box.html, that uses the addBox() method:
<html><head>
<script src="/3Dmol-min.js"></script>
<style>
.mol-container {width: 400px; height: 400px; position: relative;}
</style>
</head>
<body>
<div id="container-01" class="mol-container"></div>
<script>
$(function() {
let element = $('#container-01');
let config = { backgroundColor: 'grey' };
let viewer = $3Dmol.createViewer( element, config );
viewer.addBox({center:{x:0,y:0,z:0},dimensions: {w:3,h:4,d:2},color:'magenta'});
viewer.zoomTo();
viewer.rotate(45, {x:1,y:1,z:1});
viewer.render();
});
</script>
</body></html>
This example HTML code will display a 3D box as shown below:
⇒ addLabel() - Create Text Labels
⇐ GLViewer Class and Instance Methods
⇑⇑ 3Dmol.js FAQ
2023-09-07, 1102🔥, 0💬
Related Topics:
